Question

我正在尝试将div2与div1

重叠

<div id="div1"></div>
<div id="div2"></div>

#div1{
    width: 200px;
    height: 200px;
    background-color: olive;
    float: right;
    position: relative;
    z-index: 1;
}
#div2{
    width:100px;
    height: 100px;
    background-color: orange;
    float: right;
    position: relative;
    z-index: 2;
}

我需要两个都向右浮动。

Answer 1

有很多方法可以让它们重叠。

第一个例子http://jsfiddle.net/QsLVB/3/

使用负边距。

#div2{
    margin: 20px -100px 0 0;
}

第二个例子http://jsfiddle.net/QsLVB/4/

让div成为另一个孩子的孩子。在这种情况下，z-index将不会执行任何操作，因为子项将始终显示在父项上方。

<div id="div1">
<div id="div2"></div>
</div>

此外，您可以转到其他路线并使用position: absolute代替顶部/右侧值等。

Answer 2

#div1{
  width: 200px;
  height: 200px;
  background-color: olive;
  position: absolute;
  z-index: 1;
  right: 0;
}
  #div2{
  width:100px;
  height: 100px;
  background-color: orange;
  position: absolute;
  z-index: 2;
  right: 0;
}

实际上，您不需要负边距或类似的东西 - 您只需修改现有的CSS来解决问题。我用我的代码运行它，效果很好。这是我在您的案例中选择的解决方案。

首先要对你需要使用的位置进行分层：绝对或位置：固定（这对我们的需求来说同样适用）。

其次，一旦使用绝对位置（或固定位置），您可以选择使用top：right：bottom：和left：来定位每个div的一个或多个边缘。您不需要其中任何一个，但至少提供一个将保证该边缘将出现在其包含div的像素位置。

假设你将这两个div放在body标签内，或者至少不需要它们比它们的外部div更右边，你可以设置＆＃34; right：0;＆＃34;对于每个div，它们的工作方式类似于float：对于相对定位的div（正如在原始代码中），但由于它们是绝对定位的，因此它们可以占据相同的空间。

然后使用z-index来控制哪一个出现在另一个之上。

欢呼:-D

Answer 3

您还可以设置div2的left或right属性

DEMO using left

#div2 {
    ...
    left: 200px;
}

或者不使用float:right，而是将position:absolute与right结合使用

DEMO

#div1, #div2 {
    /* float: right; // removed */
    position: absolute; /* changed from relative */
    right: 0; /* added */
}

Answer 4

如果您将div2置于div1内，div2为绝对位置，right: 0，而其父div1有一个#div1 { position: relative; width: 200px; height: 200px; background-color: olive; float: right; } #div2 { width:100px; height: 100px; background-color: orange; position: absolute; right: 0; }，则很容易实现相对位置。

在此处查看此行动：http://jsfiddle.net/heGJt/

这是简化的CSS：

<div id="div1">
  <div id="div2"></div>
</div>

HTML：

{{1}}

使用z-index将1 div重叠在另一个上

4 个答案: