Html 如何获得具有相对位置的重叠 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13533153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get overlapping divs with relative positions?
提问by TilmanBaumann
I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div.
我希望几个 div 彼此相邻放置在一行中，但也允许它们与前一个 div 重叠。
What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other.
我想要得到的是一个带有 div 的时间线，用于特定长度的事件。这些事件可以相互重叠。
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.
我的想法是给每个 div 相同的顶部位置、增加的 z-index 和增加的左侧位置（根据事件的时间）。后来我会通过鼠标悬停事件弹出单个 div 以可视化重叠。
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 都放在下一个 div 下。通过摆弄顶部属性，我可以让它们水平对齐，但我看不到图案。
<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.
如果我使用绝对位置，元素会飞出周围的 div 并绝对定位在页面中的某个位置。
回答by Mahendra Mustika Wijaya
It's simple. Make an inner div using absolute positioningbut wrappedwith a div that uses relative positioning:
这很简单。使用绝对定位制作一个内部 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>
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.
您可以使用另一种方法，如负边距，但如果您想动态更改 HTML，则不建议使用。例如，如果您想移动内部 div(s) 的位置，只需设置容器的 top/left/right/bottom CSS 属性或使用 JavaScript（jQuery 或其他方式）修改属性。
它将使您的代码保持干净和可读。
回答by Praveen Kumar Purushothaman
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/
小提琴：http: //jsfiddle.net/vZv5k/
Another Solution:
另一个解决方案：
Give the .dayclass a width, height, and positionit relatively, keeping the inner divs absolutely positioned.
给.day班级一个width, height, 和position它relatively, 保持内部divs absolutely positioned。
Check out the below CSS:
查看以下CSS：
.day {position: relative; width: 500px; height: 500px;}
And the HTML:
和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>
回答by TilmanBaumann
I found the solution. It's probably blindingly obvious to anyone who knows css.
我找到了解决方案。对于任何了解 css 的人来说，这可能是显而易见的。
I thought I could not use absolute positioning because my elements would fly out of the surrounding div.
我以为我不能使用绝对定位，因为我的元素会飞出周围的 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/positionexplains it well.
https://developer.mozilla.org/en-US/docs/CSS/position解释得很好。
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;
绝对定位位置绝对到下一个周围的锚点。如果没有定义其他锚点，则默认为整个页面。要使某物成为锚点，它需要是 position:relative;
Quick solution
快速解决方案
add position: relative;to the day class and using absolute positioning in the inner div.
添加位置：相对；到日课并在内部 div 中使用绝对定位。
回答by Benny Neugebauer
With the topattribute, 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.
使用该top属性，您还可以移动相对定位的对象。在我的代码示例中，红色框与绿色框重叠，因为它是z-index. 如果删除z-index，则绿色框位于顶部。
HTML:
HTML：
<div class="wrapper">
<div class="box one"></div>
<div class="box two"></div>
</div>
CSS:
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;
}
