Re: position fixed, z-index and Google Chrome.

On Tue, Feb 5, 2013 at 10:30 AM, James Robinson <jamesr@google.com> wrote:
> I can't tell what sort of layout you are attempting to achieve here, but in
> general the solution for issues like this where you want to order
> descendants of a position:fixed element is to apply the z-index to the
> position:fixed element itself.

Check out the markup - he has a fixpos <header> with z-index:1, a
fixpos <footer> with z-index:auto, and in the footer, a <dl> with some
fixpos <dd>s with z-index:100 that are initially display:none but
positioned over the <header>. When you hover one of the <dt>s, it
flips the display to block.

Because the <footer> has z-index:auto, in FF it doesn't establish a
stacking context, and the <dd> flips on top of the <header>.  In our
impl, the <footer> automatically establishes a stacking context, so
the <dd> is trapped in the <footer>'s z-index level, which is below
the <header>.

An easy way to fix this is to make <footer> at the same or higher
z-index than <header>, as James suggests.  The example isn't actually
*trying* to interleave anything, it just happens by accident.

~TJ

Received on Tuesday, 5 February 2013 19:24:18 UTC