CSS Absolute und Relative Fragen?
TailwindCSS
One sollte doch zu sein Parent div gehen mit top-0 wegen relative aber es geht außerhalb alles divs. In dem Video von Web Dev Simplified sollte es so sein wie ich es beschrieben habe
https://www.youtube.com/watch?v=jx5jmI0UlXU&ab_channel=WebDevSimplified
1 Antwort
Ein absolut positioniertes Element richtet sich am nächstliegenden relativ positionierten Elternelement aus. Wenn es keines gibt, dient das body-Element als letztmöglicher Anker.
Beispiel:
<!doctype html>
<title>Example</title>
<link href="style.css" rel="stylesheet">
<body>
<div class="wrapper">
<div class="container">
<div>First</div>
<div class="top">Top</div>
</div>
</div>
</body>
style.css:
.wrapper {
background: yellow;
padding-top: 10px;
position: relative;
}
.container {
background: orange;
padding-top: 10px;
position: relative;
}
.top {
background: blue;
position: absolute;
top: 0;
}
Für .top ist hier .container der Ankerpunkt zur Positionierung. Die y-Position (top) geht von der linken oberen Ecke des .container-Elements aus.
Wenn man nun einmal das position-Property aus der CSS-Regel für .container entfernt, richtet sich .top an .wrapper aus, da dies nun das nächstliegende relativ-positionierte Elternelement ist.
Wenn auch aus der Regel für .wrapper das position-Property entfernt wird, ist das body-Element der Ankerpunkt.
Dieses Verhalten erlebst du ebenso in deinem Beispiel im Tailwind-Editor. Das Element mit dem Text One richtet sich am body-Element aus, denn es gibt in der Hierarchie kein dazwischenliegendes Elternelement mit einer explizit relativen Positionierung.