Create a floating div on top of divs

Question

I am trying to create something like the following

 -------------------------
|            div 1        |
|_________________________|
| div2 on top of div1/div3|         


        

Answer 1

Here's another possible solution you could nest div2 in div3 then add position relative to it and add a negative top to it. Like this:

HTML

CSS

.div2 {
    position: relative;
    top: -50px;
}

Here's a fiddle I added some transparency (through the opacity property) to div2 so you could tell it was above divs 1 and 3. http://jsfiddle.net/hN5gq/

Alot of these answers seemed to use css positioning. Which is the right way to go. Here's a good article on positioning it's a useful thing to understand along with floating so that you can execute almost any layout. http://alistapart.com/article/css-positioning-101/