CSS Positioning Tutorial for Beginners
In this post we are going to discuss CSS positioning best practices. It is one of the tough tasks to layout the page elements in CSS. The CSS element positioning is that how you position an element on the page relative to the other elements, to its starting position or to the whole view port itself. You can place elements on page using these three things. There are three CSS positioning schemes as the Default Scheme for CSS Positioning (Normal Flow), the Element Floating Scheme and the Absolute Positioning.
In the previous post about learn CSS step by step we have discussed the Units of Measurement in CSS. We have tried to give you to the point material in that post. We hope that it will be helpful in making you understand the concept well.
CSS Positioning Schemes
There are three schemes available to position an element on a web page.
- The Normal flow (of an element)
- The Element Floating
- The Absolute Positioning
If you are learning CSS the CSS positioning is one of the most important things that you should have to learn. You should learn the above positioning schemes to position elements on a web page. It is very difficult to layout the elements without understanding these CSS positioning schemes.
Default Scheme for CSS Positioning (Normal Flow)
The default scheme is applied by the browser when you do nothing to layout the page elements. The block level elements are stacked on one another as block. They take the width of the container and expand themselves like blocks. The inline elements are placed by the flowing of the line boxes. It means that they stack themselves like the lines of paragraph. So if you want to have the default scheme then you have to do nothing. The browser will do it for you.
CSS Absolute Position Scheme
If you want to position your page elements by yourself then you have to set the position property. The syntax for the position property is as follows:
Position: static | relative | absolute | fixed | inherit
CSS Static Position
It the CSS positioning that is default for an element. So if you don’t set any property value the static property is set by default.
CSS Position Relative to Parent
In a web page the elements are regarded as part of the normal document flow. Yet the element can be positioned with respect to its position using the top, bottom, left and right offset values. See the code below to understand more:
Here is a picture to explain it further.
The .div1 is positioned according to its relative position. It is positioned relatively 50px from its top and 100px from the left. You should notice that its default position place is empty now.
CSS Absolute Positioning
The CSS absolute positioning is used to position elements absolutely where we want to place it according to the positioned parent container. The elements are positioned relatively to their nearest positioned ancestor. See the code below to grape it further.
See the picture below that illustrates more.
You can see in the picture that as we have positioned the .div1 box absolutely positioned to its parent element. Notice that the default place of the div1 box is taken by the other elements as it is absolutely positioned. Keep in mind that if there is no parent element is positioned then the element will be positioned to the body tag.
CSS Positioning Fixed
The fixed positioning is used to fix a element to the active view port. It will fix the element relative to the active view port. If you scroll the element will stay at that position on the screen and will not disappear. It is used to make the users see what you want where ever they are on the page.