CSS. Positioning elements

This tutorial will help you learn CSS position properly.

Position property is usually used to put the element to the required place on the screen. Let’s see what options we have.

Static

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right properties.

There is no need to specify static position in the CSS file unless you need to reset other position value that has been set before.

	div.a{
    	position:static;
        }

Relative

A relative positioned element is positioned relative to its normal position. You can affect the position of the element using the “top” and “left” properties.

	div.b{
    	position:relative;
        top:20px;
        left:20px;
        }

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Relatively positioned elements are usually used as parent blocks for the absolutely positioned ones.

Absolute

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is

	div.c{
    	position: absolute;
        top:20px;
        left:20px;
        }

The following image displays the behavior of the div with the “c” class and absolute position in case it is placed within the div with class “b” and relative position

Below you can see the case when the absolutely positioned element doesn’t have any relatively positioned one.

Fixed

An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled

	div.c{
    	position: fixed;
        top:20px;
        left:20px;
        }

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

You can learn more about the elements positioning from the following article

Don’t forget to review our Bootstrap Admin Themes based and find out more about CSS functionality.