Positioning
Users can use positioning to position an element. They can be arranged using top, right, bottom, and left properties. But these properties will work differently with each position method.
Users can use positioning to position an element. They can be arranged using top, right, bottom, and left properties. But these properties will work differently with each position method.
Contains "children" elements.
Contained by its "parent" element.
Static elements simply position themselves to the normal flow of your page. By default, HTML elements are positioned as static, so they will stack accordingly. Note: they ignore top, right, bottom, and left properties.
Absolute positioned elements are removed from the normal flow of your page. It gets positioned relative to its parent element/container. Note: use top, right, bottom, and left properties to position an absolutely positioned element.
An element with fixed position is positioned relative to your window. It will not move even if the window is scrolled.
When you use relative positioning on an element, it will first be laid out as a static element. Then you can use top, right, bottom, and left properties to position it.
It's good to note that relative positioning isn't useful for laying out columns of content. However, its incredibly useful to position absolute elements. The reason being is that once you make a containing block relatively positioned, it can contain absolutely positioned children.
Here the penguin has been absolutely positioned. Using the top and left properties, I'm able to position the penguin inside its home.
Absolute postioned elements will overlap other elements unless you place margins or padding on other elements to accomodate.
Here the house has been absolutely positioned. Using the same top, right, bottom and left properties, I'm also able to position the penguin.
By using the z-index property, elements are able to be "stacked." Positioned elements can overlap depending on their z-index. An element/box with a higher z-index (or stack level) will be stacked on top. Or displayed in front of an element with a lower z-index.
Here the parent element is set to a higher z-index. So you will see that the house has been "stacked" on top of the penguin.
Here the child element is set to a higher z-index. Which now brings it to the front, so it is now "stacked" on top of the house.
These little eggs are elements that have been positioned using fixed positioning. Similar to the absolute propery, a fixed element wont move as you scroll through a document page.