Home/ Questions/Q 6204873
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T05:10:23+00:00

On webkit nightly builds and chrome canary, every element with position fixed seems to

  • 0

On webkit nightly builds and chrome canary, every element with position fixed seems to be getting a super high z-index value regardless of what it’s given either inline or in the CSS file.

See http://nick-evans.com for an example.

Do you think this a bug in these beta builds, or something incorrect in my code?

The only cause I can think of in my example is that the lower elements are rendered after the page loads using jQuery tmpl (this was an attempt at pseudo lazy loading).

.horizontal-carousel has an explicit z-index set to 1 and is set to position:fixed, meanwhile .col is set to z-index:9 yet all but the contents of the first section element have this relationship in reverse, so the images in the carousel cover their descriptions.

UPDATE

It occured to me that unminified code would help. Here’s a link

http://nick-evans.com/clients/me/tsch-tmpl/index.html

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s caused by the CSS 3D Transform you added to .horizontal-carousel. In fact, it appears someone has run into a similar problem with that before in “css z-index lost after webkit transform translate3d“.

    Whether it is your fault or theirs, I’m not sure. The only thing I can find in the spec that looks related to this is:

    Any value other than ‘none’ for the transform results in the creation of both a stacking context and a containing block. The object acts as though position: relative has been specified, but also acts as a containing block for fixed positioned descendants. The position on the Z axis of a transformed element does not affect the order within a stacking context. With elements at the same z-index, objects are drawn in order of increasing z position.

    The easiest way to fix it is by changing the z value of the translate3d to -1px. But then it doesn’t look like you’re actually using the transforms at all, at the moment. I don’t know if that’ll work if you actually start doing something with these transforms.

    Fiddling with the z-index of both the element with the transform and its parent might also help, but will probably require some other changes.

    • 0