html - 响应式绝对定位侧边广告

Question

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

我遇到的问题是，如果我将其嵌套在 .container 中，它可以正常工作，但正如在我的实际站点中一样，它将遍历这也将循环 .ad 框多次，所以我需要将 div 定位在我的循环代码之外，这是我无法根据设计调整大小的地方。

在 fiddle 中，它位于右上角，但我希望它贴在粉红色列旁边并与黑色列重叠。

http://jsfiddle.net/zbe5vf0n/5/

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;
}