将 div 设为特定 div 的绝对值答案

【问题标题】：Making a div absolute to specific div将 div 设为特定 div 的绝对值
【发布时间】：2019-02-14 21:13:05
【问题描述】：

是否可以将div 设为特定相对div 而不仅仅是父级？

例如。我有一个包含在一行内的 div。但是，我希望它在section 而不是row 中是绝对的。由于 WordPress 主题样式，两个 div 都位于 relative。如果我使用位置absolute，它只会使其成为row 的绝对位置。

我该如何解决这个问题？

.section {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f5f5f5;
}

.row {
  width: 80%;
  height: 100%;
  position: relative;
  background: #000000;
  margin: 0 auto;
}

.content {
  width: 200px;
  height: 200px;
  background: pink;
  position: absolute;
  right: 0;
  top: 0;
}

<div class="section">
  <div class="row">
    <div class="content">
    </div>
  </div>
</div>

【问题讨论】：

不……这不是定位的工作原理……但是 为什么 div 是相对定位的……除非你有特定的原因，否则没有必要.只需覆盖.row 上的定位即可。
如果可能的话，将你的 div 放在行外，这样它就会相对于部分。
不可能。我在 WordPress 上使用 Divi 主题，我只能将模块放在行之外。我也无法从row 中删除定位，因为它需要是相对的。
如果任何子节点具有绝对位置，则它依赖于自己的父节点而不是直接父节点。
我能做到这一点的唯一方法是将所有divs位置设置为取消设置，直到我到达我想成为父母的div？

标签： html css css-position

【解决方案1】：

这不是定位的工作原理。 div 或任何其他元素在其定位方面与其父级相关。如果您想在您拥有的部分内放置一个元素，最好按如下方式构建您的代码：

<div class="section">
  <div class="absoluteDiv">
  </div>
  <div class="row">
  </div>
</div>

您可以找到更多示例here

希望对你有帮助，康斯坦丁诺斯。

【讨论】：

我知道这不是最佳做法。但是，我使用的是 Divi Builder，我无法访问代码结构，因为它是在 WordPress 上构建的。不过还是谢谢你的建议。

【解决方案2】：

虽然您不能将 div 设置为特定 div 的绝对值，但获得所需结果的一种方法是将overflow:visible; 添加到行并将left:100%; 添加到内容容器。出于演示目的，我将部分高度更改为300px，但它与100% 的行为相同。

.section {
  width: 100%;
  height: 300px;
  position: relative;
  background: #f5f5f5;
}

.row {
  width: 80%;
  height: 100%;
  position: relative;
  background: #000000;
  margin: 0 auto;
  overflow:visible;
}

.content {
  width: 200px;
  height: 200px;
  background: pink;
  position: absolute;
  left: 100%;
  top: 0;
}

<div class="section">
  <div class="row">
    <div class="content">
    </div>
  </div>
</div>

【讨论】：