将div绝对设为特定div

Question

是否可以将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> 

Answer 1

这不是定位的工作方式。 div或任何其他元素与其上级有关。 如果要将元素放置在自己拥有的部分中，则最好按以下方式构造代码：

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

您可以在这里找到更多示例

希望能有所帮助，康斯坦丁诺斯。

Answer 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>