CODEWITHSUNDEEP
csshtmllayercss-position
TilmanBaumann
TilmanBaumann

Reputation: 15436

How can I get overlapping divs with relative positions?

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.

Upvotes: 40

Views: 116661

Answers (4)

Mahendra Mustika Wijaya
Mahendra Mustika Wijaya

Reputation: 571

Wrap an absolute positioned div with a relative positioned div:

.container {
  position: relative;
  width: 200px;
  height: 100px;
  top: 100px;
  background: yellow
}

.one {
  z-index: 1;
  position: absolute;
  width: 100px;
  height: 20px;
  background: red;
}

.two {
  z-index: 2;
  position: absolute;
  width: 100px;
  height: 20px;
  background: blue;
  left: 10px;
  top: 10px;
}
<div class="container">
  <div class="one">a</div>
  <div class="two">b</div>
</div>

Unlike negative margin this method is more dynamic with HTML.
To reposition the inner divs, adjust the top/left/right/bottom CSS properties or JS of the container.

Upvotes: 57

Benny Code
Benny Code

Reputation: 54812

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;
}

Upvotes: 7

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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>

Upvotes: 34

TilmanBaumann
TilmanBaumann

Reputation: 15436

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.

Upvotes: 9

Related Questions