Unfortunately, I can't post a link. Hopefully someone can help me based on
the following info...
Given this structure and style:
@media only screen and (min-width:960px){
.topper{position:fixed;z-index:10;}
header{position:fixed;z-index:0;}
section, aside, footer{position:relative;z-index:5;}
}
<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>
Narrower @media widths have no fixed elements. All relative. Obviously
there are more styles involved, but this works fine in Chrome, FF and IE11.
Safari (Mac) seems to have issues with the stacking. When scrolling down
the page, the header content is visually on top of the footer until I hover
a link in the footer. The entire footer then comes completely on top of the
header as desired. However, after this the section element is then behind
the header. It's very odd.
I know a link is best, but does anyone have any ideas what might be
happening? And thoughts would be appreciated.
Thanks 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/
