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
Post a Comment