How can I get overlapping divs with relative positions?

Question

I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div.

What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other.

My idea was to give each div the same top position, an increasing z-index and an increasing left position (according to the time of the event). Later I would pop individual divs out by mouse-over events to visualise the overlap.

What I do is to make it so each div gets placed under the next one. With fiddling of the top attribute I can get them to align horizontally, but I don't see the pattern.

 <div class="day">          <div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>          <div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>          <div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>  </div>  

If I use absolute positions, the elements fly out of the surrounding div and are positioned absolutely at some place in the page.

Answer 1

It's simple. Make an inner div using absolute positioning but wrapped with a div that uses relative positioning:

<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">     <div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>     <div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div> </div> 

You can use another method like negative margin, but it's not recommended if you want to dynamically change HTML. For example, if you want to move the position of the inner div(s), just set the top/left/right/bottom CSS properties of the container or modify the properties using JavaScript (jQuery or otherwise).

It will keep your code clean and readable.

Answer 2

Use Negative Margins!

<div class="day">     <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>     <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>     <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div> </div> 

Fiddle: http://jsfiddle.net/vZv5k/

---

Another Solution:

Give the .day class a width, height, and position it relatively, keeping the inner divs absolutely positioned.

Check out the below CSS:

.day {position: relative; width: 500px; height: 500px;} 

And the HTML:

<div class="day">     <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>     <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>     <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div> </div>