Positioning

CSS POSITION PROPERTY AND ITS VALUES

The CSS position property defines the position of an element in a document. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page.

VALUES OF POSITIONING

There are four values the position property can take. They are:

Static
Relative
Absolute
Fixed

Let's discuss each one of them:

1. STATIC: This is the default value for elements. The element is positioned according to the normal view of the document. The left, right, top and bottom properties do not affect an element with position: static. The static doesn’t have any effect on the position of an element.

<html>
    <body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>

            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
        </div>
    </body>
<html>

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

2. RELATIVE: Elements with position: relative remain in the normal flow of the document. The left, right, top and bottom properties affect the position of the element. A change, based on the values of left, right, top and bottom properties, is applied to the element relative to itself.

.main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

3. ABSOLUTE: Elements with the position: absolute are positioned relative to their parent elements. The element is removed from the normal document flow. The other elements will behave as if that element is not in the document. The values of left, top, bottom and right will determine the final position of the element.

.main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
    background: #f2f2f2;
    padding: 10px;
    border: 1px solid #81adc8;
}

4. FIXED: Elements with the position: fixed are always stay in the same position on the screen. They are also removed from the normal flow of the document. Fixed elements are not affected by scrolling.

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

html {
    height: 800px;
}

I really hope this was helpful. Till next time, bye. Emmanuel.

Emmanuel's Blog

Emmanuel's Blog

Article on Postioning.