- From: Alan Gresley <alan@css-class.com>
- Date: Wed, 04 Dec 2013 11:35:04 +1100
- To: Ali Juma <ajuma@chromium.org>, Robert O'Callahan <robert@ocallahan.org>
- CC: "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 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.
Alan
<!doctype html>
<style type="text/css">
list {
display: block;
-webkit-backface-visibility: hidden;
margin-right: 200px;
position: relative; /* ADD */
}
item {
display: block;
-webkit-backface-visibility: hidden;
border: 1px solid black;
height: 50px;
margin: 2px;
/* position: relative; **** this is what isolates the popup **** */
background-color: white;
}
item:hover {
transform: translate(100px);
}
popup {
position: absolute;
/* top: 5px; **** use a top margin intsead ****/
margin-top: 5px;
right: 5px;
margin-right: 5px;
border: 2px solid red;
height: 200px;
width: 200px;
background-color: white;
z-index: 100;
}
</style>
<list>
<item>Item 1</item>
<item>Item 2</item>
<item>Item 3
<popup>I need to be above everyone to be a popup menu
</popup>
</item>
<item>Item 4</item>
<item>Item 5</item>
<item>Item 6</item>
<item>Item 7</item>
<item>Item 8</item>
</list>
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Wednesday, 4 December 2013 00:35:34 UTC