Question

我在容器中有两个div。一个漂浮在左边，一个漂浮在右边。两者都是容器的大约60％，并且被设计成在中间重叠（右侧优先）。

如何使它们重叠而不是像浮动元素一样垂直堆叠？如果我绝对定位正确的元素，则包含的div不会扩展以适合内容。

代码（不幸的是我无法解释这个，因为他们的服务器只读取atm）：

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: right;
}

Answer 1

在左侧框中使用否定margin-right，以便允许右侧框重叠：

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
    margin-right:-104px;
}

104像素是重叠量加上4px的边框。

这是jsfiddle。

Answer 2

你只能通过定位来做到这一点。

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
    position: relative;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

Answer 3

你可以在那里添加额外的div吗？

<div id="container"> 
    <div id="left">
        <div id="left-inner">left</div>
    </div> 
    <div id="right">right</div> 
</div> 
<style>
#container { 
    width: 400px; 
} 

#left { 
    float: left;
    width: 0px;
    overflow:visible; 
} 

#left-inner { 
    float: right;
    width: 250px; 
} 

#right { 
    width: 250px; 
}
</style>

Answer 4

您可以创建具有绝对位置的div，并为您想要在前面的那个添加正z-index。

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    width: 400px;
    background-color: #eee;
    position: relative;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
}

Answer 5

使容器更大，以便两者都适合。然后使用position relative和left：-100px或右边的那个。

Answer 6

出色的解决方案： http://jsfiddle.net/A9Ap7/237/

所以，不要使用：

  MARGIN-LEFT:100px...

== 或类似的命令。
问题是，如果左侧元素大小改变了，如果窗口调整大小等等，那么它会让你出问题！所以，不要使用这样的自定义脏“技巧”，但在html中制作一个正常的结构，所以它们应该是自然有序的。

Answer 7

试试这个：

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
<style>
#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    margin-left: 150px;
    position: absolute;
}
</style>

Answer 8

如何用负边距拉右边的div。像这样的东西？

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#container {
    position: relative;
    width: 400px;
    height: 110px;
    background-color: #eee;
}

#left {
    width: 250px;
    height: 100px;
    border: 1px solid green;
    float: left;
}

#right {
    position: relative;
    float: right;
    width: 250px;
    height: 100px;
    top: -100px;
    border: 1px solid red;
}

CSS：使两个浮动元素重叠

8 个答案: