【CSS】【z-index】如何实现两个子组件在对方父组件之上

本文链接：https://blog.csdn.net/qq_42358061/article/details/137297326

本文介绍了如何通过在HTML和CSS中使用堆叠上下文和z-index属性，让两个子组件在各自父组件的层级结构中实现特定的堆叠顺序，确保一个子组件覆盖另一个。

摘要由CSDN通过智能技术生成

如何实现两个子组件在对方父组件之上

文章目录

1 前置知识
2 笔记
3 如何实现两个子组件在对方父组件之上

1 前置知识

堆叠上下文和堆叠层级

2 笔记

元素在Z轴上的堆叠顺序
- 由元素的堆叠上下文和堆叠层级共同决定
产生堆叠上下文的条件：
- 根元素
- position为非static定位 + z-index为具体数值
判断元素堆叠顺序
- 判断两个元素是否在同一个堆叠上下文中
  - 在。z-index大的在上面
  - 不在。先比较所在堆叠上下文的堆叠层级
- ⭐️若堆叠顺序相同时，DOM结构中后渲染的元素覆盖在前面的元素之上

3 如何实现两个子组件在对方父组件之上

parent1创建堆叠上下文，parent2`不创建堆叠上下文。

此时html、parent1、child2在同一个堆叠上下文中
parent2和child1在同一个堆叠上下文中

设置parent1和child2的堆叠层级z-index均为100。

此时，后渲染元素child2能覆盖在parent1之上。
此时，child2的堆叠上下文（parent1）的堆叠层级z-index比parent1的堆叠上下文（html）的堆叠层级高，故在parent1之上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index</title>
    <style>
        .parent1 {
            width: 300px;
            height: 300px;
            background-color: lavender;

            position: relative;
            z-index: 100;
        }

        .parent2 {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .child1 {
            position: fixed;
            top: 400px;
            left: 10px;

            width: 50px;
            height: 20px;
            background-color: aquamarine;
        }

        .child2 {
            position: fixed;
            top: 200px;
            left: 10px;
            z-index: 100;

            width: 50px;
            height: 20px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="parent1">parent1创建堆叠上下文
        <span class="child1">child1</span>
    </div>
    <div class="parent2">parent2不创建堆叠上下文
        <span class="child2">child2</span>
    </div>
</body>

</html>