Two CSS absolute positioned items in one page

Question

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

Could you provide some code snippet, so to help us understand it better? — LcSalazar, Apr 29 '15 at 16:49
Can not understand the question, can it be explained better? — Stickers, Apr 29 '15 at 17:09
Why would you even position that as `absolute`? I'm afraid you're lacking a basic understanding of CSS positioning — Stephan Muller, Apr 29 '15 at 17:11
Can't understand the question due to grammar and possible spelling typos. Unsure what you are trying to achieve or what issues you are having — Huangism, Apr 29 '15 at 17:14
@StephanMuller Because if i do differently I can no center it in between my two collum in the exact center of the collum. — 15eme Doctor, Apr 29 '15 at 17:15
@StephanMuller If it is wrong could you please explain why. May be he is still learning things.. :) — It worked yesterday., Apr 29 '15 at 17:16
@StephanMuller If I am asking a question it is because I am learning — 15eme Doctor, Apr 29 '15 at 17:18
@15emeDoctor do you want to center it horizontally or vertically? I could give you advice if I knew what exactly you want to achieve. Either way, this is definitely not the right approach. — Stephan Muller, Apr 29 '15 at 17:20
You did include the code but still your question is not clear. Language Barrier I guess. Check this blogpost to have some understanding of CSS Positioning http://www.barelyfitz.com/screencast/html-training/css/positioning/ — YourFriend, Apr 29 '15 at 17:21
@15emeDoctor Look here for some ways to do this: http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div. The first answer for multiple lines of text, the second is better if you just have 1 line. If all you want to center is "OR", the second answer is for you :) — Stephan Muller, Apr 29 '15 at 17:22
@StephanMuller This is good. but if the content is always the same size on the right or the left and this will change from one page to an other. this is why I why I used 50%. — 15eme Doctor, Apr 29 '15 at 17:36
@humble.rumble.6x3 I have added on image. The thing I want is to reset the absolute layout everythime I use it Like clearfixe for float — 15eme Doctor, Apr 29 '15 at 18:06

score 0 · Accepted Answer · answered Aug 21 '15 at 22:00

0

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

answered Aug 21 '15 at 22:00

15eme Doctor

365
1
3
15

Two CSS absolute positioned items in one page

1 Answers1