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|
|-------------------------|
|        div2             |
|_________________________|
|                         |
|        div3             |
|                         |

I want to create a div2 on top of both div1 and div3 .

I really have no clues how to do this. Can someone help me about it? Thanks.

Answer 1

You need to use absolute CSS positioning. Example:

<div id="container">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>

#container {
  position: relative;
}
#div2 {
  position: absolute;
}

Here's a jsfiddle example: http://jsfiddle.net/M7J3G/1

Answer 2

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

Just change to

<div id="2"></div>
<div id="1"></div>
<div id="3"></div>

or create a Wrap element to divs 1 and 3

<div id="wrapper">
    <div id="1></div>
    <div id="2></div>
    <div id="3></div>
</div>

and the css:

#wrapper {
position: relative;
}
#2 {
position: absolut;
bottom: 100%;
}

Answer 3

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

<div class="div1"></div>
<div class="div3">
    <div class="div2"></div>
</div>

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/