Two CSS absolute positioned items in one page -

i have design requires absolute positioned object on top of page. (menu inside of circle)

then 5 row later (using foundation) have second absolute positioned element. position based on previous element because once apply position: absolute 1 element, you’ll find applying else. if rows positioned relative default, doesn't reset absolute position, element floating beginning of page.

i can position if add element have touch css not good.

so how reset absolute position, tried have elements before second element static , other absolute not work.

the first element based on this gist, later code is:

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

that's html

   <div class="small-6 columns  text-center " >        <div class="panel " data-equalizer-watch>          content       </div>     </div>     <div class="or" > or</div>    <div class="small-6 columns  text-center">       <div class="panel" data-equalizer-watch>          content       </div>    </div> 

this or part need centered no matter content on side here regular not on page

thanks

the solution simple (like always) is put relative parent div