Outline
í
There are actually four positioning types. The default is
static. Additionally one can choose between the three options
absolute,
relative and
static. You only refer to an object as „positioned“ if one of the last three positioning types is applied. The different types majorly differ, but each one of them can be very useful depending on the particular use-case.
Take for
granted that every element on a webpage can be considered as a rectangle of pixels (a box).
Static
ì
í
Let’s start with the default setting:
Static doesn't mean much, it just means that the element will flow into the page as it normally would. As positioning doesn’t
cascade, it very rarely happens that some positioning gets applied to an element outside of your control. To forcefully remove such a positioning from an element you’d use
position: static.
Relative
ì
í
It’s important to understand this type well, because is misused often.
The reference object to which the relation applies is the element itself.
As a result, nothing happens to the position of an object if you don’t state the direction in which the object should shift. For instance, to shift an object 100 pixels to the
right the attribute would be
{
position: relative;
left: 100px
}
Think about it as follows: In your mind, go to the left border of the object (the box). Place 100 imaginary pixels between your standpoint and the box to shift it to the right. This is especially useful for adding a caption to an image, for instance. This can be a pitfall if your image is absolutely positioned. So be careful when mixing up
absolute and
relative. Especially when the elements depend directly on each other’s position.
Also remember that positioned elements have a
z-index value that is always higher than the one of static elements. In fact, static elements don’t really have a z-index. Hence they always stay underneath positioned elements.
Furthermore be aware of the fact that any element that is a child of the relatively positioned element can be absolutely positioned within that block, which can be particularly useful.
Absolute
ì
í
This type of positioning that allows you to literally place any page element exactly where you want it. These values will be relative to the next parent element with relative (or absolute) positioning. If there’s no parent, the default is the <html> box, which results in a positioning relative to the page. Although this type of positioning can be very powerful, always remember that those elements are removed from the flow of the page. That means that they don’t have an effect on other elements, as well as other elements don't affect them. This can decrease the responsiveness of your site.
Fixed
ì
í
A fixed position element is positioned relative to the viewport, the browser window itself. That means that the position of a fixed element doesn't change when you scroll the page, because the viewport (window) does not move at the same time. This can particularly be useful for navigational elements. Again, be careful! Test your site thoroughly after implementing fixed elements. Scroll your page into all directions and see if some elements overlap. Moreover, test your page on different screen sizes. For example, if your fixed sidebar is too bulky for small screens, there is no way for the user to scroll down to see the full sidebar content (because scrolling doesn’t affect the viewport).