Question

我无法通过在响应式设计中使用position：absolute来正确定位.ad。

我遇到的问题是，如果我将.container嵌入其中，它可以正常工作，但在我的实际网站中它将会通过这个也会多次循环.ad框，所以我需要将div放在我的循环代码之外，这是我无法通过设计调整大小的地方。

在小提琴中，它位于右上角，但我希望它贴在粉红色的柱子旁边并与黑色柱子重叠。

body{color:#fff; display:flex; flex-direction:column;}
.fullcontainer{width:100%; background:#ff00ff; height:400px;height:auto;}
.container{  width:300px; height:auto; margin: 0 auto;background:#000; position:relative;}
.col1{display:flex; flex:1; margin-right:100px; background:#ff0000;}
.ad{position:absolute; z-index:1;top:0px; right:0px;height:300px; width:90px; background:#ccc;}

<div class="fullcontainer">aa
<div class="container">
<div class="col1">col1</div>
</div>
<div class="fullcontainer">aa
<div class="container">
<div class="col1">adad</br>
dfdfs</div>
</div>
</div>
<div class="ad"></div>

Answer 1

绝对位置仅在嵌套在相对定位元素内时才起作用。所以你的解决方案是添加：

.fullcontainer {
  position: relative;
}

Answer 2

您可以将.ad div放在.container div中。因此.ad div可以相对于.container div定位。但是只将.ad div添加到第一个.container div。

<强>的jsfiddle

http://jsfiddle.net/oe51297k/

响应绝对正面广告

2 个答案: