Overlapping elements in CSS

Question

How can I make two elements overlap in CSS, e.g.

Content 1
Content 2

I would like the two con

Answer 1

You can use relative positioning to overlap your elements. However, the space they would normally occupy will still be reserved for the element:

    DEFAULT POSITIONED


    RELATIVE POSITIONED


    DEFAULT POSITIONED

In the example above, there will be a block of white space between the two 'DEFAULT POSITIONED' elements. This is caused, because the 'RELATIVE POSITIONED' element still has it's space reserved.

If you use absolute positioning, your elements will not have any space reserved, so your element will actually overlap, without breaking your document:

    DEFAULT POSITIONED


    ABSOLUTE POSITIONED


    DEFAULT POSITIONED

Finally, you can control which elements are on top of the others by using z-index:

    DEFAULT POSITIONED


    ABSOLUTE POSITIONED


    DEFAULT POSITIONED