Wie setze ich div zwischen zwei div

Question

Ich muss so etwas machen, wie kann ich das Quadrat in der Mitte zwischen diesen beiden machen? Hier ist die CSS und Photo

Mein Css

#up{ 
    width:100%; 
    height:30%; 
    } 
#down{ 
    width:100%; 
    height:70%; 
    } 
#square{ 
    width:40px; 
    height:40px; 
    } 

Kann ich den Platz Einstellung ohne den Prozentsatz der Lage der Mittellinie zu zählen? (Weil ich alle so etwas wie dies in allen Sitzungen des Web hinzufügen möchten, und die Höhe der Sitzung reagiert, durch die Textlänge

Answer 1

können Sie haben ein <div> Platz wie:

<div id="div1"></div> 

in CSS :

#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 */ 
} 

Answer 2

den Platz in die zweite div Stoßen, es geben ein position: absolute und top: -20px (und left: Xpx - also alles, was Sie/wollen, müssen)

.

Answer 3

Sie können dies leicht mit position: absolute zu Ihrer kleinen Box Div.

Hier ist die Lösung, die Sie

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>

Answer 4

Sie Position relativ zum äußeren div und Position relativ zum inneren div

hier verwenden müssen helfen können

ist der Link wie können Sie es tun

fiddle

.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>