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

Answer 1

With the top attribute, you can also move relatively positioned objects. In my code sample the red box overlaps the green box due to it's z-index. If you remove the z-index, then the green box is on top.

HTML:

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

CSS:

.wrapper {
  width: 50px;
  height: 50px;
  overflow: hidden;
}

 .box {
  width: 100%;
  height: 100%;
  position: relative;
}

 .box.one {
  background-color: red; 
  z-index: 2;
  top: 0px;
}

 .box.two {
  background-color: green; 
  z-index: 1;
  top: -50px;
}

Answer 2

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 3

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>

Answer 4

I found the solution. It's probably blindingly obvious to anyone who knows css.

I thought I could not use absolute positioning because my elements would fly out of the surrounding div.

Turns out, I misunderstood absolute positioning. It's not the same as fixed, but to me it looked like that.

https://developer.mozilla.org/en-US/docs/CSS/position explains it well.

Absolute positioning positions absolutely to the next surrounding anchor. That defaults to the whole page, if no other anchor is defined. To make something a anchor it needs to be position: relative;

Quick solution

add position: relative; to the day class and using absolute positioning in the inner div.