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.

回答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.

回答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>

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/13533153/how-can-i-get-overlapping-divs-with-relative-positions

标签

css

html

layer

css-position