Два CSS-позиционированных элемента на одной странице

Question

У меня есть дизайн, который требует абсолютно позиционированного объекта в верхней части страницы. (меню внутри круга)

Затем, примерно через 5 строк (используя фундамент), у меня есть второй элемент с абсолютным позиционированием. Но его позиция основана на предыдущем элементе, потому что, как только вы примените position: absolute к одному элементу, вы обычно применяете его ко всему остальному. Таким образом, даже если строки расположены по умолчанию относительно, это не сбрасывает абсолютную позицию, поэтому элемент перемещается в начало страницы.

Я могу расположить его, но если я добавлю элемент, мне придется подправить CSS, так что это не хорошо.

Итак, как вы сбрасываете абсолютную позицию, я пытался сделать элементы до того, как мой второй элемент статический, а другой - абсолютный, но он не работает.

Первый элемент основан на этом 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>

Это часть "И", которая должна быть центрирована, независимо от того, является ли содержание на стороне регулярным, но не на всей странице.

Спасибо

Answer 1

Решение было простым (как всегда), это поставить относительно родительского div