CSS Layout Basics: HTML5 & CSS3 Elements Positioning

HTML5 & CSS3 : Positioning of Elements

Most of the websites we are daily visiting from any of our devices have things like images, texts, heading that from now on we will refer to each one of them as Elements. All these elements are placed in a specific position no matter if you make the screen wider or narrower. Isn't this amazing? Nevertheless, you should know that things aren't that in the creation process as you might probably think of. Positioning all these elements is a really tough job to maintain especially in our days were -we, the programmers - have to include the responsiveness due to the screen's resolution difference. 

In order to achieve interface to appear almost the same in every different device which means different screen resolution, you need to adjust these measurements differently for every device. 

The CSS file includes all these details. Firstly we need to specify the position property. The options for that property are 5: 

• Static
• Fixed
• Relative
• Absolute
• Sticky

As you might think, each one of those options makes the element behave in its own unique way.

STATIC

This is the default value that is set directly from the web browser. With this option pre-defined for us, using the

top

,

bottom

,

left

and

right

properties won't affect the elements. This means that we aren't allowed to move the element outside of the page's normal flow.

FIXED

This value gives us the ability to select an element and put it in a certain place no matter if we scroll the page. This element will now be positioned

relative

to the viewport and not to any other element of the page. The element will stay in this

fixed

position like nothing happen to the page. As you might have understood already we have to use the

top

,

bottom

,

right

and

left

properties so we can give it a certain position. 

RELATIVE 

When we set the

position: relative;

to an element, we are able to position it relative to its normal position defined firstly by its normal position. By selecting this option for the position we are now able to set the top, bottom, right, left properties to whatever measurement we want in order to adjust the element away from its normal position. 

ABSOLUTE

With this property being set to an element we can achieve positioning the selected element to the nearest positioned ancestor(instead of what's happening to the fixed option above). Because inheritance really matters a lot in HTML( HyperText Mark-up Language) you should always keep in mind that if the element doesn't have a positioned ancestor, it will automatically use the body element (the main page element) and will move along with page scrolling. A small tip to keep in mind always is that every time we mention positioned elements we are referring to any element that has a property given to it besides the default value. 

STICKY

This property makes our element toggle between relative and fixed positions related to the scroll position. Firstly, it's behaving like a relatively positioned element until the scroll reaches the viewport of the page. After that, it will remain at this specific point until the end.

To conclude, my only suggestion on which property we should use and when, I’m sorry to disappoint you here guys but there isn’t any default property always related to a certain element. You should better get familiar of the behaviour of each one so they will be ready to used according to your needs. The only way Is to keep on practising with this properties and try to use them whenever is needed.

Special thanks to w3schools.com for providing all the information for coding materials.

Special thanks on DJ Johnson for this great image.