一页中有两个 CSS 绝对定位项答案

【问题标题】：Two CSS absolute positioned items in one page一页中有两个 CSS 绝对定位项
【发布时间】：2015-08-22 06:00:37
【问题描述】：

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

然后大约 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部分需要居中的内容不管这里的内容是常规的但不是在所有页面上

谢谢

【问题讨论】：

能否提供一些代码sn-p，以便我们更好地理解它？
问题看不懂，能不能解释的好一点？
我已经添加了代码sinppet
你为什么要把它定位为absolute？恐怕你对 CSS 定位缺乏基本的了解
由于语法和可能的拼写错误，无法理解问题。不确定您要达到的目标或遇到的问题

标签： css absolute css-hack

【解决方案1】：

解决方案很简单（像往常一样）是相对于父 div 放置

【讨论】：