Question

我希望z-index高于div { width: 100px; height: 100px; } .div1 { background: red; z-index: 1; } .div2 { background: blue; margin-top: -15vh; z-index: 2 }。我尝试使用<div class="div1"></div> <div class="div2"></div>，但它不起作用。

我已尝试过此代码：

＆＃13;

model {
    components {
        library(NativeLibrarySpec) {
            binaries.withType(StaticLibraryBinarySpec) {
                buildable = false
            }
        }
    }
}

＆＃13;

$ gradle components
...
Binaries
Shared library 'library:sharedLibrary'
    build using task: :librarySharedLibrary
    build type: build type 'debug'
    flavor: flavor 'default'
    target platform: platform 'linux_x86-64'
    tool chain: Tool chain 'gcc' (GNU GCC)
    shared library file: build/libs/library/shared/liblibrary.so
Static library 'library:staticLibrary' (not buildable)
    build using task: :libraryStaticLibrary
    build type: build type 'debug'
    flavor: flavor 'default'
    target platform: platform 'linux_x86-64'
    tool chain: Tool chain 'gcc' (GNU GCC)
    static library file: build/libs/library/static/liblibrary.a
    Disabled by user

＆＃13;

Answer 1

在许多情况下，必须定位一个元素才能使z-index起作用。

确实，将position: relative应用于问题中的div会解决z-index问题。

实际上，position: fixed，position: absolute和position: sticky也会启用z-index，但这些值也会更改布局。使用position: relative时，布局不会受到干扰。

基本上，只要元素不是position: static（默认值），它就会被视为已定位且z-index将起作用。

此处和相关问题中的一些答案断言z-index仅对定位元素。从CSS3开始，这已不再适用。

即使z-index为position，flex items或grid items元素也可以使用static。

来自规格：

4.3. Flex Item Z-Ordering

Flex项目绘制与内联块完全相同，除了使用订单修改的文档顺序代替raw   文档顺序以及z-index以外的auto值即使position为static也会创建堆叠上下文。

5.4. Z-axis Ordering: the z-index property

网格项的绘制顺序与内联块完全相同，但订单修改的文档顺序除外   用于代替原始文档订单，z-index以外的auto值创建堆叠上下文，即使   position是static。

以下是z-index处理非定位弹性项目的演示：https://jsfiddle.net/m0wddwxs/

Answer 2

您可以向两个div添加position: relative并创建stacking context

＆＃13;

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

或者您可以使用transform-style: preserve-3d;，因此现在.div1应位于 3D空间中，而不是在平面中展平。

＆＃13;

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  transform-style: preserve-3d;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

您还可以使用translate或transform

之类的随机rotate

＆＃13;

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  transform: translate(1px);
}

.div2 {
  background: blue;
  transform: translate(1px, -15vh);
  z-index: 1;
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

Filters也可以，但它们有错误Support

＆＃13;

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  filter: brightness(0.4);
  z-index: 2;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  filter: brightness(0.4);
  z-index: 1;
}

＆＃13;

<div class="div1"></div>
<div class="div2"></div>

＆＃13;

Answer 3

z-index仅适用于position以外static的元素，例如：relative，absolute或fixed。

div {
  width:100px;
  height: 100px;
  position:relative;
}
.div1 {
  background: red;
  z-index: 2;
}
.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1
}

<div class="div1"></div>
<div class="div2"></div>

Answer 4

div的默认属性为position:static，在position:relative中添加div，只有z-index才有效。

使用z-index将div高于另一个div

4 个答案: