stacking context / z-index
Posted January 24th, 2009 by WilliamCarrier
| <me> | I'm having a really hard time understanding why in the following Stacking context example why DIV #2 (z-index: 2) is above DIV #3 (z-index: 1), because they both belong to the same stacking context (the root one), I thought DIV 1 & 3 had the same context (like a tree) https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_context_example_2 |
| <riven> | me: #1 has established a stacking context, below #3. |
| <me> | riven: yes but the explanation mention 2 & 3 |
| <riven> | me: huh? |
| <me> | riven: the first paragraph under the image |
| <riven> | yeah, I don't understand what you mean though |
| <me> | root --- div 1 |
| <me> | \--- div 3 |
| <me> | is this the flow ? |
| <me> | that's what I understood |
| <riven> | me: 1: root; 1.1: #1, 1.2: #3 1.1.1: #2 1.2.1: #4 |
| <me> | riven: yes so see #1 and #3 are both childs of 3 so shouldn't thos be in a stacking context ? |
| <riven> | children* |
| <riven> | and um |
| <me> | direct descendants |
| <riven> | "#1 and #3 are both childs of 3" -- what? |
| <me> | of root sorry |
| <riven> | yes.. |
| <riven> | they are part of the same stacking context, but create their own, new, context because they are both non-statically positioned. |
| <riven> | (they both have pos:rel;) |
| <me> | why it says #2 and #3 are in the same stacking context, i don't get it |
| <me> | riven: ^ |
| <riven> | me: ah, typo |
| <me> | riven: where's the typo ? |
| <riven> | me: wait hold on, let me actually look at the html there |
| <me> | riven: yes it's below |
| <riven> | me: whoops, I totally didn't realize #1 wasn't given a z-index |
| * me | hopes he's not too stupid after all |
| <riven> | hehe |
| <riven> | so, since #1 doesn't have z-index, it doesn't create a new stacking context |
| <riven> | so #2 is still part of the previous stacking context, which is root |
| <riven> | and same goes for #3, obviously |
| <me> | ahhh ! smart |
| <me> | so only float and pos: abs & rel create new stacking contexts ? |
| <me> | riven: so only float and pos: abs & rel create new stacking contexts ? |
| <riven> | me: floats are a special case |
| <riven> | me: only elements with a z-index value other than 'auto' create a new, explicit, stacking context |
| <riven> | me: on floats, as per the spec: "The contents of floats are stacked as if floats generated new stacking contexts, except that any elements that actually create new stacking contexts take part in the float's parent's stacking context." |
| <me> | riven: thank you kindly for you help |
| <riven> | np |
