We all know that CSS position property can be a hurdle sometimes for beginners who are just learning to code, but once you get comfortable with it, it offers mass flexibilty with the positions of elements and their surrondings.

CSS has a property called position which is used to set different positions for elements when designing web pages or layouts.

However, there are also different methods used for positioning elements which includes ; display and float method. This article aims to cover the position property , the five different values and how to properly use them with each of their offset values(top, bottom, left, right).

They are ;

• Static position
• Fixed position
• Relative position
• Absolute position
• Sticky position

Static position

The static position property is known as the default and normal positioning, this is because HTML elements are positioned to be static. Static positions are not affected by any of the offset values , here the elements are not to be positioned in a special way , rather they are displayed based on the document flow which is how you structure your HTML code.

For example, your are packing up a suitcase for a trip and you hurriedly place all your items inside at once without proper arrangement, automatically all items take default positions.

Fixed position

An element displayed with fixed position ia always positioned relative to the viewport of the web page.

This simply means the elements do not move when they are scrolled either up or down ( they always stay at the same spot when set to this position).

Fixed positioning is like placing your elements where ever you want them to be on the web page using any of the offset values for your desired position. The use cases of fixed position are more visual when you have a navigation or a side bar that stays fixed on the page.

Relative position

The relative position tells the selected element to move relative from it's current position. Now let's go back to the suitcase example mentioned earlier, if you want to move a specific item away from it's default position, the position should be set to relative with any of the offset values. This would adjust the item away from it's default position.

Once this position is set, the orignal space of the selected element will not be changed from the normal flow of the document.

Absolute position

Absolute positioned elements are always positioned relative to nearest parent div container with any of the offset values set to it.

However, if an absolute positioned element has no nearby parent container it uses the document body as it's container and moves along with page scrolling.

Sticky position

Elements with this position are often based on the user's scroll position. As the name implies “sticky”, it simply means that a selected element sticks to a particlar place when set to this position.

Sticky position can be seen as the combination of both realtive and fixed position, whereas the elements are positioned relative until a given offset value is met. This position is not commonly used because it is not supported by some browsers.

Conclusion

There is a popular saying “that parctice makes perfect”, yes it does!

To get better and understand the concepts and techniques of the position property, you have parctice as you learn this way it sticks to your brain like the sticky position!

#HTML5 #CSS #100daysofcode #codenewbies.