Question

<div id="1">
 <div id="2">
 </div>
</div>

我不能将div2放在div1之上（不是在z-index中而是在垂直维度中）。负面位置：顶部不起作用，看起来像父div的上边界是儿童的限制。

      |-------|
      | div2  |
------|       |
|     |_______|
|          |
|   div1   |
|__________|

Answer 1

以数字开头的类名无效，但可能在某些浏览器中有效。使用div1或div2，这应该有效。请查看this answer以获得有效CSS类名称的详细说明。

评论后更新：

好的，没有看到有问题的代码，很难看出问题出在哪里。但是使用这个css你可以重现你的图表：

#div2 {
    position:relative;
    top:-30px;
    left:100px;
}

我认为你已经知道..但也许你忘记了position:relative？无论如何，看它在this fiddle中工作。

Answer 2

请记住，position：relative属性允许相对于该元素放置该元素内的子元素。它实质上定义了一个新的点，可以相对地放置元素。

因此，如果我们有一个div（oneDiv），其位置为：relative，然后在该div中另一个div（twoDiv）的位置为：absolute，则第二个div（twoDiv）的位置将是绝对的，但相对于它的父母。

.oneDiv {
  position: relative;
  top: 100px;
  background-color: red;
  height: 200px;
  width: 200px;
}

.twoDiv {
  position: absolute;
  right: -50px;
  top: -50px;
  background-color: blue;
  height: 100px;
  width: 100px;
}

<div class="oneDiv">
  <div class="twoDiv">
  </div>
</div>

因此，“顶部”不再是文档的顶部，而是子级父项的顶部。通过使用上面的示例，可以确保您保留布局，并且如果移动.oneDiv，无论如何，twoDiv都将紧随其后。

将子div放在父div之上

2 个答案: