将子 div 置于父 div 之上答案

【问题标题】：Position children div above parent div将子 div 置于父 div 之上
【发布时间】：2019-09-27 16:57:34
【问题描述】：

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

我无法将 div2 定位在 div1 上方（不在 z-index 中，而是在垂直维度中）。负位置：顶部不起作用，似乎父 div 的顶部边框是子级的限制。

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

【问题讨论】：

您是否尝试过 possition:absolute/fixed 取决于您要达到的目标？
div2 必须相对于 div1 定位。因为会有几个具有这种样式的 div。
您还应该显示与 div 关联的 css。例如，如果父 div 有overflow:hidden，那么在父 div 之外的子 div 的一部分将被隐藏。另外，如果我是正确的 id 和 classname 不应该以数字开头。

标签： html css css-position

【解决方案1】：

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

cmets 后更新：

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

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

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

【讨论】：

我猜这只是一个例子。
如果是这样，我们就无法解决我们看不到的问题。 Rendom，也许您可以发布您正在使用的 html 和 css？
数字名称只是举例。它可以是任何其他的。请参阅上面的示例并为您喜欢的 div 使用任何名称。

【解决方案2】：

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

因此，如果我们有一个 div (oneDiv)，位置：relative，然后在该 div 中的另一个 div (twoDiv)，具有 position: 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>

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

【讨论】：