Html CSS：使两个浮动元素重叠

我在一个容器中有两个div。一个向左浮动，一个向右浮动。两者都约为容器宽度的60%，并设计成它们在中间重叠（右DIV优先）。p> 如何让它们重叠，而不是像浮动元素通常那样垂直堆叠？如果绝对定位正确的元素，则包含的div不会展开以适合内容

代码（不幸的是，我不能这么做，因为他们的服务器是只读atm）：

左边
正确的
#容器{
宽度：400px；
背景色：#eee；
}
#左{
宽度：250px；
边框：1px实心#ccc；
显示：内联；
浮动：左；
}
#对{
宽度：250px；
边框：1px实心#ccc；
显示：内联；
浮动：对；
}

您可以创建具有绝对位置的div，并在想要位于前面的div上添加一个正z索引

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

左边
正确的
#容器{
宽度：400px；
背景色：#eee；
位置：相对位置；
}
#左{
宽度：250px；
边框：1px实心#ccc；
显示：块；
位置：绝对位置；
顶部：0px；
左：0px；
}
#对{
宽度：250px；
边框：1px实心#ccc；
显示：内联；
位置：绝对位置；
顶部：0px；
右：0px；
z指数：1；
}

您只能通过定位来实现这一点

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

左边
正确的
#容器{
宽度：400px；
背景色：#eee；
位置：相对位置；
}
#左{
宽度：250px；
边框：1px实心#ccc；
位置：绝对位置；
左：0；
排名：0；
z指数：1；
}
#对{
宽度：250px；
边框：1px实心#ccc；
位置：绝对位置；
右：0；
排名：0；
z指数：2；
}

试试这个：

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

左边
正确的
#容器{
宽度：400px；
背景色：#eee；
} 
#左{
宽度：250px；
边框：1px实心#ccc；
浮动：左；
} 
#对{
宽度：250px；
边框：1px实心#ccc；
左边距：150像素；
位置：绝对位置；
}

拖动右边空白处的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;
}

左边
正确的
#容器{
位置：相对位置；
宽度：400px；
高度：110px；
背景色：#eee；
}
#左{
宽度：250px；
高度：100px；
边框：1px纯绿色；
浮动：左；
}
#对{
位置：相对位置；
浮动：对；
宽度：250px；
高度：100px；
顶部：-100px；
边框：1px纯红；
}

使容器更大，以便两者都适合。然后在右边的框上使用相对位置和左边：-100px或任何东西。

在左边框上使用负数

边距右边

，以便允许右边框重叠：

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

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

---

这是一个。

你能在里面再加一个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>

左边
正确的
#容器{
宽度：400px；
} 
#左{
浮动：左；
宽度：0px；
溢出：可见；
} 
#左内{
浮动：对；
宽度：250px；
} 
#对{
宽度：250px；
}

优秀的解决方案：

因此，不要使用：

  MARGIN-LEFT:100px...

== 或类似命令。
问题是，如果左侧元素的大小发生更改，如果窗口的大小发生调整等，则会给您带来问题！

---

因此，不要使用这种自定义的肮脏“技巧”，而是在html中创建一个正常的结构，这样它们应该自然有序。

如果您在定义“0px”时不知道“px”是不需要的，您可以使用top:0；保存一些字符我已经这样做了，但这意味着父容器不会扩展以适应内容。您可以使用百分比而不是固定值来放置容器和div的宽度。e、 g.容器宽度：100%、#左宽度60%和#右宽度60%。如果我正确，“display:inline”属性也不允许设置尺寸。这意味着，如果将显示设置为“内联”，则不应定义任何宽度和/或高度。而你在漂浮，这对我来说似乎没用。我将使用z-index，您可以通过javascript控制：hover或click（）s（在两个元素之间交换值）。界面的动态性如何？

display:inline

是多余的，因为任何

float

ed的元素都会自动

display:block

。添加额外的结构来完成样式是对HTML和CSS的不当使用。@Bradley A.Tetreault:一般来说，这是正确的。但现实情况比这更糟糕——以IE6-8为例，它的所有修复/黑客，也涉及到大量的div.fixer（或div#fixer），非常棒。我一直在寻找重叠浮动列的解决方案（对于自动高度选项卡），这是一个完美的解决方案！我不喜欢这个。这似乎是一个非常“习惯”的情况。问题可能会发生，如果第二个元素的大小从100px更改为任何大小…它们最好自然对齐，而不是欺骗。这并不能解决允许两个元素（容器宽度的60%）重叠的问题。

  MARGIN-LEFT:100px...