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/
