与不同父母的Z索引 [英] Z-Index with different parents

问题描述

我在使用z-index时遇到了一些麻烦. 这是我的简化布局:

I'm having some trouble with the z-index. This is my simplified layout:

<div id="overlapper"></div>
<div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

我需要overlapper出现在child1之前但在child2之后. 我尝试弄乱z索引，但由于堆叠上下文，它无法正常工作.

I need overlapper to appear in front of child1 but behind child2. I tried messing around with z index but it didn't work, I think because of the stacking context.

有什么需要帮助的吗? 谢谢

Any help please? thanks

推荐答案

首先，确保overlapper，child1和child2属于同一堆叠上下文.

First, make sure that overlapper, child1 and child2 belong to the same stacking context.

也就是说，确保container不会创建堆栈上下文:

That is, make sure container doesn't create a stacking context:

• container不能是根元素.
• container必须具有 position 的默认值， z-index ， opacity 和

• container must not be the root element.
• container must have the default value for position, z-index, opacity and isolation properties:
  • position: static or z-index: auto
  • opacity: 1
  • isolation: auto

  现在，放置overlapper，child1和child2元素，然后根据需要添加z-index.

  Now, make overlapper, child1 and child2 positioned elements, and add z-index as you want.

  #overlapper, #child1, #child2 {
    position: relative;
    padding: 30px;
    height: 20px;
  }
  #overlapper {
    z-index: 3;
    background: red;
    top: 60px;
    margin-left: 20px;
  }
  #container {
    margin-top: -40px;
  }
  #child1 {
    z-index: 2;
    background: green;
    top: -40px;
  }
  #child2 {
    z-index: 4;
    background: blue;
    margin-left: 40px;
  }

  <div id="overlapper">Overlapper</div>
  <div id="container">
      <div id="child1">Child 1</div>
      <div id="child2">Child 2</div>
  </div>

  这篇关于与不同父母的Z索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！