Wie einstellen Position in css

Question

.top{ 
 
    width:100%; 
 
    height:50vh; 
 
    background-color:red; 
 
} 
 
.bot{ 
 
    width:100%; 
 
    height:50vh; 
 
    background-color:black; 
 
} 
 
.content{ 
 
    position:relative; 
 
    width:50px; 
 
    height:50px; 
 
    background-color:white; 
 
    left: 0px; 
 
    bottom:0px; 
 
}

<div class='top'> 
 
<div class='content'> 
 
</div> 
 
</div> 
 
<div class='bot'> 
 
</div>

Inhalt auf dem inneren Boden des ersten div ist nicht .top, warum nicht position:relative bottom:0px Arbeiten zur Festlegung, während auf absolute Positionierung in unteren Rand des Bildschirms kommt, so kann ich div auf der Unterseite des ersten div .top mit der Position absolut, Inhalt Breite Höhe zu legen, obwohl zu ändern.

Answer 1

position: relative-.top hinzufügen und position: absolute zu .content

.top{ 
 
    width:100%; 
 
    height:50vh; 
 
    background-color:red; 
 
    position:relative; 
 
} 
 
.bot{ 
 
    width:100%; 
 
    height:50vh; 
 
    background-color:black; 
 
} 
 
.content{ 
 
    position:absolute; 
 
    width:50px; 
 
    height:50px; 
 
    background-color:white; 
 
    left: 0px; 
 
    bottom:0px; 
 
}

<div class='top'> 
 
<div class='content'> 
 
</div> 
 
</div> 
 
<div class='bot'> 
 
</div>

Answer 2

Boden 0px nicht arbeitet mit Position relativ, und wenn Sie mit Postion relativ tun möchte ich für Sie eine Lösung gefunden

.top{ 
 
    width:100%; 
 
    height:50vh; 
 
    background-color:red; 
 
} 
 
.bot{ 
 
    width:100%; 
 
    height:50vh; 
 
    background-color:black; 
 
} 
 
.content{ 
 
    position:relative; 
 
    width:50px; 
 
    height:50px; 
 
    background-color:white; 
 
    left: 0px; 
 
bottom: calc(-100% + 50px); 
 
}

<div class='top'> 
 
<div class='content'> 
 
</div> 
 
</div> 
 
<div class='bot'> 
 
</div>