As web developer, we probably interact with the css everday. But when code for HTML layout, sometimes it’s still headache for many programmers. So this post is aim to provide a better understanding about how to use CSS
Position property when building HTML layout.
As we all know, HTML layout is based on
Documentation Flow model. In this model,
block element hold in a line and
inline element opposite. Below it’s an example to show the difference between each other.
Position property is used to indicate one element position inside HTML. The syntax as below:
- Position: static
The default position for all HTML element is
static if not set yet.
- Position: relative
The relative is used to indicate the element position based on the previous position. Here the element is still in the documentation flow, which means the previous position is still hold space.
- Position: absolute
Compare with relative, absolute is used to indicate the element in a specified position relative to its closest ancestor if any, or otherwise relative to the initial containing block. Here the element is out of documentation flow, which means the previous position is no existing anymore. In the example it will be replaced by blobck two.