如何实现两个子组件在对方父组件之上
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>
目标效果