divs彼此顶部css

Question

嗨我想把div 1放在div 2之上。但这不起作用

    .div1, div2 {
  width:100px;
  height:100px;
  float:left;
}
.div1{

  left:-50px;

  position:relative;
    z-index:-1;
}
.div2{
  left:-50px;
  z-index:1;
  position:relative;
}

Answer 1

如果您的蓝框首先出现在HTML中，则将蓝框的左侧更改为px，将红框的左侧更改为-204px。如果红色框首先出现在HTML中，则将红框的左侧更改为0px，将蓝色框的左侧更改为-204px。

（额外的4个像素用于两侧的2 px边框。）

使用Myles的JSFiddle，这是一个位置的演示：相对解决方案：JSFiddle

Answer 2

尽量避免使用负z-index值，

尝试使用z-index:1上的.bluebox和z-index:2上的.redbox

你走了：

<强> Live Demo

绝对定位和z-index的巧妙融合：）

Answer 3

在您的示例中，框不重叠，因为它们彼此相邻浮动，然后将它们都移动到左侧100px。尝试仅将红色框移动到左侧，然后如果您希望它位于顶部，则将蓝色框设为更高z-index。 z-index是堆叠顺序，其中数字较小的元素显示在数字较大的元素下方。 Mozilla Developer Network有关于此主题的良好信息。

稍微调整一下，这对我来说很好：http://jsfiddle.net/mlms13/ZGJXt/2/

Answer 4

如果你想要顶部的蓝色框，你必须给它一个更高的z-index值。现在它更低了。

这并不重要，因为你让它们都浮动并留有边距，这样它们实际上不会重叠。

尝试给出红色框margin-left: -200px并给出蓝色框z-index: 10。