Text in absolutely positioned div is overlapping

Question

In the below code snippet, the div elements (.main > div) are relatively positioned and are floated left.

Because of the relative positioning, the div elements (.main >

Answer 1

The reason is that each of your position:absolute; elements are removed from the DOM's native flow, and positioned absolutely to their parent element. Since they both have the same positioning, they are placed over top of each other. Use position:relative to position the elements relative to their native position in the DOM.