Search code examples
htmlcsscss-position

Two CSS absolute positioned items in one page

I have a design that requires an absolute positioned object on the top of the page. (menu inside of a circle)

Then about 5 row later (using foundation) I have a second absolute positioned element. But its position is based on the previous element because once you apply position: absolute to one element, you’ll usually find yourself applying it to everything else. So even if the rows are positioned relative by default, it doesn't reset the absolute position, so the element is floating to the beginning of the page.

I can position it but if I add an element I have to touch up the CSS so this is not good.

So how do you reset absolute position, I tried to have elements before my second element static and the other absolute but it does not work.

The first element is based on this Gist, then later the 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 it for the 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>

This is the Or part that need to be centered no matter the content on the side here it is regular but not on all the page

Solution

  • The solution was simple (like always) is is to put relative to the parent div