CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）

原创

朝阳39 2024-07-15 14:56:33 博主文章分类：CSS ©著作权

文章标签 css 内联元素默认值 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者朝阳39的原创作品，请联系作者获取转载授权，否则将追究法律责任

仅对已定位的元素（ position:relative，position:absolute，position:fixed ）有效，默认值为0，可以为负值。

z-index 的层叠规则

z-index 值从小到大层叠

兄弟元素

z-index 值相同时，后面的元素在前面的元素上面

<template>
  <div class="box demo1"></div>
  <div class="box demo2"></div>
</template>

<style scoped>
.box {
  height: 60px;
  width: 60px;
  position: absolute;
}
.demo1 {
  /* z-index 默认为 0 */
  background-color: red;
}
.demo2 {
  /* z-index 默认为 0 */
  background-color: green;
  top: 20px;
  left: 20px;
}
</style>

z-index 值不同时，z-index 值较小的在下方

CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）_css

<template>
  <div class="box demo1"></div>
  <div class="box demo2"></div>
</template>

<style scoped>
.box {
  height: 60px;
  width: 60px;
  position: absolute;
}
.demo1 {
  background-color: red;
  z-index: 2;
}
.demo2 {
  /* z-index 默认为 0 */
  background-color: green;
  top: 20px;
  left: 20px;
}
</style>