- From: Alan Gresley <alan@css-class.com>
- Date: Wed, 04 Dec 2013 20:46:22 +1100
- To: Ali Juma <ajuma@chromium.org>
- CC: Robert O'Callahan <robert@ocallahan.org>, "L. David Baron" <dbaron@dbaron.org>, Benoit Girard <bgirard@mozilla.com>, Matt Woodrow <matt@mozilla.com>, Cameron McCormack <cmccormack@mozilla.com>, www-style <www-style@w3.org>, "Tab Atkins Jr." <jackalmage@gmail.com>
On 4/12/2013 12:06 PM, Ali Juma wrote: > On Tue, Dec 3, 2013 at 7:35 PM, Alan Gresley <alan@css-class.com> wrote: > >> On 4/12/2013 9:06 AM, Ali Juma wrote: >> >> To see why it would helpful for some will-animate values other than "auto" >>> to not create a stacking context, consider the following example: >>> http://jsfiddle.net/6rUyf/ >>> >> >> Agree. >> >> >> There's a list of items and a pop-up menu attached to one of them (more >>> generally, there might be pop-ups associated with each item). Say the >>> author would like be able to animate the items' positions, and also wants >>> the pop-up to move with its parent item and stay above the other items. In >>> this case, transform animations cannot be used, since applying transforms >>> to the items will turn them into stacking contexts, causing the pop-up to >>> pop underneath other items. >>> >> >> I don't understand. You already have established a stacking context by >> using position:relative for each item. This will cause problems to begin >> with. It needs to be placed on the list itself. Please examine the below >> code. >> > > Not quite; since the items still have z-index 'auto', position:relative > doesn't make each item a stacking context, it just makes the item be the > containing block for the position:absolute popup. I did stay that position:relative *established* a stacking context. I should also have mentioned that it's for it children. The spec [1] (9.9.1) does state this: | Stacking contexts are not necessarily related to | containing blocks. > With your suggested > changes, applying a transform to an item will still cause the popup to pop > under the other items (since applying a transform makes the item a stacking > context). Did you test my changes or just assume that they would not work? A demo. http://css-class.com/test/temp/transform-stacking.htm 1. http://www.w3.org/TR/CSS21/visuren.html#z-index Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/
Received on Wednesday, 4 December 2013 09:46:52 UTC