Question

我写了一个简单的代码，其中的一个主盒子里面有两个小盒子。

我已将较小的盒子的位置设置为绝对位置，以便根据其父对象设置它们的位置。

我想做的是将son2 div放在前面，因为现在son div隐藏了

我尝试了z-index属性，但是（正如我期望的那样）我的元素位于parent元素之下，而不是在小的蓝色框之下

#parent {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
  margin-top: 200px;
  margin-left: 200px;
}

#son2 {
  position: absolute;
  background-color: green;
  width: 50px;
  height: 50px;
  margin-top: 20px;
}

#son {
  position: absolute;
  background-color: blue;
  width: 50px;
  height: 50px;
  margin-top: 10px;
}

<div id="parent">
  <div id="son2"></div>
  <div id="son"></div>
</div>

在Codepen上的演示：https://codepen.io/mattiasu96/pen/KbpyNQ

Answer 1

微小的更改（只需将@EqualsAndHashCode(callSuper = true) @Data @Entity public class Owner extends User{ @OneToMany(mappedBy = "owner") private List<Pet> pets; }添加到z-index: 1;）。顺便说一句，除非您也需要将其位置更改为自然位置，否则您不想为父级设置son2，否则请使用position: absolute以使其正常渲染，但绝对定位的子级仍然表现出预期的效果。

我已经从父级删除了页边距，只是为了查看div而不必滚动摘要，但是如果您在原始问题中需要它，也没有什么区别。

position: relative

#parent {
  position: relative;
  background-color: red;
  width: 100px;
  height: 100px;
}

#son2 {
  position: absolute;
  background-color: green;
  width: 50px;
  height: 50px;
  margin-top: 20px;
  z-index: 1;
}

#son {
  position: absolute;
  background-color: blue;
  width: 50px;
  height: 50px;
  margin-top: 10px;
}

选择哪个重叠的div在顶部

1 个答案: