Block Positioning Demo

I am a static positioned block -- first in Document Order. Document Order simply refers to the order in which the elements are defined in the HTML file.

I am a static positioned block -- second in Document Order.

I am class static1 block.

Changing the top and left properties will not move me.

I am class relative1 block that has been moved relative to where it would normally be in the layout flow. Notice that the space normally allocated to me in layout flow is still preserved.

One might expact that I would be stacked underneath Ishmael because he comes later in document order. However, moved relative positioned blocks are always stacked on top of static blocks.

I am a static positioned block. Call me Ishmael.

I am class relative1 block that has been moved. But Egbert is on top because of Document Order.

I am class relative3 block that has NOT been moved. Call me Egbert.

I am class relative4 block that has NOT been moved. Call me Mundungus.

I am class relative5 block. I would normally be on top of Mundungus because of document order, but the z-index values have been changed to put me under Mundungus.

Notice that my top has been set to negative value which moves me up.

I am class relative3 block that has NOT been moved.

Since Aragorn is my child block and is absolutely positioned, Aragorn is absolutely positioned inside me, not relative to the page canvas.

I am class absolute4 block (top:35px;). Call me Aragorn.

I am class absolute1 block. Call me Raul.

I am absolute2 block. I am on top of Raul since I come later in Document Order.

Raul and I are on top of everything in the normal layout flow, both static and relative.

I am class absolute3 block. I have a very high z-index of 10000 which basically puts me on top of everything.

Notice that the fixed position block will scroll under me. If you do need to use a fixed block, you have to make sure it will stay on top of everything in the page.

I am class fixed1 block. Notice that I am on top of everything in the normaly layout flow, both static and relative.

I just won't move when you scroll the page.