Building a penguin - Step 90 (positioning question)

[RustyJS]

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;
}

[carlosvisator]

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!