html - 一个页面中的两个 CSS 绝对定位项

Question

我的设计需要在页面顶部放置一个绝对定位的对象。 (圆圈内的菜单)

然后大约 5 行之后(使用基础)我有第二个绝对定位元素。但它的位置是基于前一个元素的，因为一旦你将 position: absolute 应用于一个元素，你通常会发现自己将它应用于其他所有元素。因此，即使默认情况下行是相对定位的，它也不会重置绝对位置，因此元素会 float 到页面的开头。

我可以定位它，但如果我添加一个元素，我必须修改 CSS，所以这不太好。

那么你如何重置绝对位置，我尝试在我的第二个元素静态和另一个绝对之前有元素，但它不起作用。

第一个元素基于this Gist ，那么后面的代码是:

.or {
    position: absolute;
    background-image: url(../assets/img/OR.svg);
    top: 50%;
    left: 50%;
    margin: -42px;
    width: 84px;
    height: 84px;
    background-size: 84px 84px;
    z-index: 50;
}

HTML 就这样

<div class="row" data-equalizer>    
   <div class="small-6 columns  text-center">        
      <div class="panel " data-equalizer-watch>
         this is the content
      </div> 
   </div>
                   
   <div class="or" > OR</div>
   <div class="small-6 columns  text-center">
      <div class="panel" data-equalizer-watch>
         this is the content
      </div>
   </div>
</div>

这是需要居中的Or部分，不管这里边的内容是规则的还是不是整个页面的内容

Answer 1

解决方案很简单(一如既往)是相对于父 div 放置