0

Setup

The setup has been simplified and recreated in the following jsfiddle:

https://jsfiddle.net/wheresmycookie/5L8qu0hx/29/

.section-a and .section-b is divided by .horizontal-clickable-container and I'd like the following two things to be true:

  1. .section-a has a menu that, when opened (always open in my demo), will be rendered above the .horizontal-clickable-container and .section-b.
  2. .horizontal-clickable-container's child, .horizontal-clickable-panel, is supposed to extend up into .section-a and down into .section-b by an equal amount.

Problem & what I tried

I have assigned z-indices in descending order (101, 100, 99) so that the menu now renders on top of everything nicely.

Because the indices are in descending order, .horizontal-clickable-panel (the green strip) is only rendered above .section-b, not over .section-a (here it is rendered below).

If I increase the z-index of .horizontal-clickable-container above that of .section-a, the menu will then be rendered underneath .horizontal-clickable-panel because it is in the stacking context of .section-a.

Question

How can I ensure that .horizontal-clickable-container (and children) are always rendered above .section-xs, while at the same time ensuring that .menu will be rendered on top of everything?

wheresmycookie
  • 683
  • 3
  • 16
  • 39
  • 1
    remove any z-index for section-x and increase the one of the green divider and the one of the menu https://jsfiddle.net/5h7zbfms/1/ – Temani Afif Apr 08 '20 at 23:05
  • 1
    it's all aobut stacking context, your section-x need to NOT create stacking context so they don't need to have z-index in order to get what you want (read the duplicate to understand this) – Temani Afif Apr 08 '20 at 23:06
  • @TemaniAfif you have been my hero these past few days, thank you! Is the idea, then, that if no z-index is provided that children's children will still be in the same stacking context? Across multiple generations? – wheresmycookie Apr 08 '20 at 23:42
  • 1
    you can consider the fact that initially ALL the elements whataver the hierarchy are in the same and unique stacking context. When you start adding z-index (or other properties like described in the duplicate) you start creating stacking context and you isolate all the element inside so they can no more be placed considering element outside that stacking context and so on .. if you are able to identify and control stacking context you can do what you want – Temani Afif Apr 08 '20 at 23:46

0 Answers0