Hi. Can you please explain why I would need to set the position of (.penguin to relative), but with the (.penguin * for the child elements), I had to change the position to absolute?
Help me understand.
.penguin {
width: 300px;
height: 300px;
margin: auto;
margin-top: 75px;
z-index: 4;
position: relative;
}
.penguin * {
position: absolute;
}
Hi @RustyJS
Because with position relative in their parent, the children will positioned relative to their parent, but out of the normal flow (like no elements there) because they have position absolute.
It is hard to explain so check this articles and this Kevin Powell’s short video:
Position
Layout and the containing block
CSS Positioning: Position absolute and relative explained
You can also give to your elements a border or outline to actually see the boxes, for example:
* { outline: 1px solid red; }
I hope that helps you to understand. Happy coding!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.