このようなものを作成する必要がありますが、この2つの中間に正方形を作るにはどうすればよいですか？ここではCSSであり、Photo2つのdivの間でdivを設定する方法
私のCss
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
私は真ん中のラインの位置の割合をカウントせずに、正方形を設定することはできますか？ （私は、Webのすべてのセッションには、このようなすべてのものを追加したい、とのセッションの高さは、テキストの長さ
によって応答あなたのように正方形の<div>を持つことができますので：
<div id="div1"></div>
：
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
はそれをposition: absoluteとtop: -20px（とleft: Xpx - つまり、あなたは/が望む必要なものは何でも）を得、第二のdiv INTOの正方形を置き
位置を使って簡単に行うことができます：あなたの小さなボックスのdivに絶対。ここで
あなたは、内側のdivに、外側のdivおよび位置に対する位置を使用する必要が
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}<div id="up"></div>
<div id="down"></div>
<div id="square"></div>あなたを助けることができるソリューションです
ここですリンクはどうすればいいですか
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
私たちは代わりにすべてをやっので動作するように何かを持っているので、HTML/CSSをアップロードします。 – Marc