Learn More

In HTML/CSS, what is the difference between static, absolute, relative, and fixed positioning?


position:static


The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn't specify this unless you needed to overrclasse a positioning that had been previously set.

#div-1 {
 position:static;
}
            

class = div-before

class = div-1 id = div1

class = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

class = div-1b

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincclassunt tortor, quis accumsan augue ipsum class lorem.

class = div-1c

class = div-after

position:relative


If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let's move div-2 down 20 pixels, and to the left 40 pixels:

#div-2 {
 position:relative;
 top:20px;
 left:-40px;
}
            

Notice the space where div-2 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-2. That's because div-2 still occupies that original space in the document, even though we have moved it.

class = div-before

class = div-1 id = div2

class = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

class = div-1b

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincclassunt tortor, quis accumsan augue ipsum class lorem.

class = div-1c

class = div-after

position:absolute


When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let's move div-1a to the right of the page:

#div-1a {
 position:absolute;
 right:0;
 width:100px;
}
            

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

Also notice that div-1a was positioned in the right corner of the page. It's nice to be able to position things directly the page, but it's of limited value.

What I really want is to position div-1a relative to div-1. And that's where relative position comes back into play.

class = div-before

class = div-1 id = div3

class = div-1a id = div1-a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

class = div-1b

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincclassunt tortor, quis accumsan augue ipsum class lorem.

class = div-1c

class = div-after

position:fixed


When you specify position:fixed, the element is fixed to the document and stay fixed where you tell it to go.

Let's move div-1c to the bottom of the page:

#div-1c {
 position:fixed;
 bottom:0;
 width:200px;
}
            

Notice that this time, since div-1c was fixed to the document, the other elements on the page were positioned differently: div-1a, div-1b, and div-after moved up since div-1c was no longer there.

Also notice that div-1a was positioned in the bottom of the page. It's nice to be able to position things directly the page, but it's of limited value.

if you scroll up notice that div-1c stay fixed on the page

class = div-before

class = div-1 id = div3

class = div-1a id = div1-a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

class = div-1b

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincclassunt tortor, quis accumsan augue ipsum class lorem.

class = div-1c

class = div-after