37

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.

4

4 回答 4

54

这很简单。使用绝对定位制作一个内部 div，但用一个使用相对定位的 div包裹：

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

您可以使用其他方法，例如负边距，但如果您想动态更改 HTML，不建议这样做。例如，如果你想移动内部 div(s) 的位置，只需设置容器的 top/left/right/bottom CSS 属性或使用 JavaScript（jQuery 或其他）修改属性。

它将使您的代码保持干净和可读。

于 2014-04-04T09:07:54.843 回答
33

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>
于 2012-11-23T16:56:32.617 回答
9

我找到了解决方案。对于任何了解 CSS 的人来说，这可能是非常明显的。

我以为我不能使用绝对定位，因为我的元素会飞出周围的 div。

原来，我误解了绝对定位。它与固定不一样，但对我来说它看起来像那样。

https://developer.mozilla.org/en-US/docs/CSS/position解释得很好。

绝对定位位置绝对到下一个周围的锚点。如果没有定义其他锚，则默认为整个页面。要使某物成为锚点，它需要定位：相对；

快速解决方案

添加位置：相对；到当天的课程并在内部 div 中使用绝对定位。

于 2012-11-23T17:09:42.070 回答
6

使用该top属性，您还可以移动相对定位的对象。在我的代码示例中，红色框与绿色框重叠，因为它是z-index. 如果删除z-index，则绿色框位于顶部。

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;
}
于 2014-01-20T15:03:36.563 回答