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


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -