Css div相互重叠

我想把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;
}

---

尽量避免负的

z指数
值

尝试在
上使用
z-index:1
。在
上使用bluebox
和
z-index:2
。在
上使用redbox

给你：


绝对定位和z-index的巧妙结合：）
如果您的蓝色框首先出现在HTML中，则将蓝色框的左侧更改为px，将红色框的左侧更改为-204px。如果红色框首先出现在HTML中，则将红色框的左侧更改为0px，将蓝色框的左侧更改为-204px

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

使用Myles的JSFIDLE，这里是位置：相对解决方案的演示：
在您的示例中，框不会重叠，因为它们彼此相邻浮动，然后将它们都向左移动100px。尝试只将红色框向左移动，如果希望蓝色框位于顶部，则将其设为更高的z索引。z索引是堆叠顺序，其中编号较低的元素显示在编号较高的元素下方。在这个主题上，我们有很好的信息

稍微调整一下，这对我来说很好：
如果你想把蓝色框放在顶部，你必须给它一个更高的z索引值。现在它更低了

但这并不重要，因为它们都是浮动的，并在左边加上了边框，这样它们就不会重叠了

试着给红色框留出空白：-200px
，给蓝色框
z-index:10
我希望它们在一起，而不是下一个。我有一个z-index:0的bug始终从1开始。StackOverflow不只是为您而存在。人们自愿为像你这样的人提供免费专家级咨询的全部意义在于，我们正在为每个人创造一种资源。如果你去删除你的问题，这样答案就不能帮助其他人，你就破坏了资源。不要删除你回答的问题。