Position

The Blue box is static. The static box is unaffected by the left definition.

The Green box is absolute. It is moved left starting from the top-left corner of the first parent element not positioned statically.

The Red box is relative. It is moved left starting from where it would normally be if it were static.

The Yellow box is fixed. It moves starting from the top left corner of the browser window. If you scroll, you'll see that this element moves as well.


/* CSS CODE */
 
@import url(http://css-sandbox.wdfiles.com/local--code/admin:themes);
 
.holder{
    position: relative;
    border: 1px solid #777;
    min-height: 500px;
}
.text{    z-index: 9999; }
.box{
    top: 0;
    left: 30px;
    width: 50px;
    height: 50px;
    z-index: -1;
}
.static{
    position: static;
    background: #AAF;
}
.absolute{
    position: absolute;
    background: #AFA;
}
.relative{
    position: relative;
    background: #FAA;
}
.fixed{
    position: fixed;
    background: #FFA;
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License