Wie positioniert man Inhalt in einem div?

Question

ich versuche, eine Blog-Artikel Vorschau zu machen und der Header des Artikels will 0px an die Spitze des div

ein Kind div

#Parent { 
width: 500px; 
height: 500px; 
background-color: grey; 
} 
#Child { 
color: white; 
position: ?; 
top ?; 
padding ?; 
} 

Answer 1

Zur Positionierung innerhalb des übergeordneten div hat, müssen Sie zuerst die Position auf des übergeordneten div zu positionieren: relativ. Dann setzen Sie den Child-Div auf position: absolute (und Sie können dann top/left/right/bottom verwenden, um das Child-Div nach seinem Elternelement zu platzieren). Grundsätzlich gilt: Wenn Sie position: absolute für ein Element verwenden, wird es aus dem Fluss der Seite entfernt und "absolut" entsprechend dem nächsten positionierten Element platziert.

#Parent { 
width: 500px; 
height: 500px; 
background-color: grey; 
position: relative; /* new code here */ 
} 
#Child { 
color: white; 
position: absolute; 
top: 0; 
padding: 10px; 
}