/* CSS CODE */

@import url(http://css-sandbox.wdfiles.com/local--code/admin:themes);

position: relative;
border: 1px solid #777;
min-height: 500px;
.text{ z-index: 9999; }
top: 0;
left: 30px;
width: 50px;
height: 50px;
z-index: -1;
position: static;
background: #AAF;
position: absolute;
background: #AFA;
position: relative;
background: #FAA;
position: fixed;
background: #FFA;

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.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License