一页中有两个 CSS 个绝对定位的项目

Question

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

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

我可以定位它，但如果我添加一个元素，我必须修改 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="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>

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

谢谢

Answer 1

解决方案很简单（一如既往）是相对于父 div

一页中有两个 CSS 个绝对定位的项目

Two CSS absolute positioned items in one page

css

absolute

css-hack