Blueprint CSS overlapping divs

Question

I'm using the Blueprint CSS framework, and I want to know how to create overlapping divs. If I try to use an absolutely positioned div inside of a relatively positioned div, it messes up the rest of the styling of the div by Blueprint. What is the correct way to do this?

Answer 1

Depends on what you are trying to do. You can position any element wherever you want, but if you need that element to stay in the flow of the document and just want it visually overlapping another element, you can set position:relative and use top, right, or left, bottom to set the element visually 'relative' to where it resides in the flow of the document. The element will still take up the normal space in the document. If you need to remove the element from the flow of the document, you can use position:absolute, which has the same effect as floating an element in it's container, but with finer controls on where it goes. W3schools has a good introduction to this at: http://www.w3schools.com/css/css_positioning.asp

Answer 2

Use position:relative and z-index for the images you would like to overlap.