W3C home > Mailing lists > Public > www-style@w3.org > February 2013

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 5 Feb 2013 11:23:31 -0800
Message-ID: <CAAWBYDDp4xTC9i8g7X9Ubgafcr7PwFkzd_Dcq51UAdtCAmGxcA@mail.gmail.com>
To: James Robinson <jamesr@google.com>
Cc: lists@m8y.org, www-style list <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:05 GMT