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

Re: Proposal: will-animate property

From: Alan Gresley <alan@css-class.com>
Date: Wed, 04 Dec 2013 11:35:04 +1100
Message-ID: <529E78B8.1060405@css-class.com>
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:17 UTC