I will try to see if I can create something to post that will recreate the issue.
.wrap is relative positioning. Chris, it does work but I think it looks great! ;-) On Wed Jan 21 2015 at 11:00:52 PM Chris Rockwell <ch...@chrisrockwell.com> wrote: > This is pretty ugly, but it works on Safari MAC : > http://codepen.io/chrisrockwell/full/MYmdbo/ > > Chris Rockwell > > On Wed, Jan 21, 2015 at 5:53 PM, Tom Livingston <tom...@gmail.com> wrote: > >> Unfortunately, I still can't post a link for this. Hopefully someone >> smarter than me can help me based on the following info. I'm still stumped >> on this. The problem only appears in latest Safari. >> >> Given this structure and style: >> >> @media only screen and (min-width:960px){ >> .topper{position:fixed;z-index:1000;} >> header{position:fixed;z-index:0;} >> section, aside, footer{position:relative;z-index:500;} >> } >> >> <div class="wrap"> >> <div class="topper">[children]</div> >> <div class="header">[children, including html5 video element on one >> page]</div> >> <section>[children]</section> >> <aside>[children]</aside> >> <footer>[children]</footer> >> </div> >> >> .topper is to be stacked above all others and fixed >> header is to be behind others and fixed >> section, aside and footer scroll on top of header and under topper >> Narrower @media widths have no fixed elements. All position:relative; >> >> Obviously there are more styles involved and there is additional >> content/structure inside these main elements, but this works fine in >> Chrome, FF and IE11. Safari (Mac) seems to have issues with the stacking. >> When scrolling down some pages, the header is visually on top of the >> footer >> or aside until I hover any link inside the aside or footer. The entire >> footer/aside then comes completely on top of the header as it is supposed >> to. However, after this occurs, the section element is sometimes *behind* >> the header which it wasn't previous to hovering the mentioned link. It's >> really very odd. Almost browser-bug like. >> >> I know a link is best, but does anyone have any ideas what might be >> happening? I have read that position:fixed; can create stacking context >> issues. I'm not sure what that means really or how to overcome it. >> >> I've tried suggestions from the first time I posted this with no luck. >> >> Any thoughts would be appreciated. >> >> Thank you again in advance. >> > ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
