与不同父母的Z索引 | 与不同父母的Z索引

本文介绍了与不同父母的Z索引的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

的默认值， z-index ， opacity 和 isolation 属性:

 position: static或z-index: auto 
 opacity: 1 
 isolation: auto 


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索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！