overflow VS z-index 谁更胜一筹？

日常开发中overflow和z-index属性使用还是很频繁的，但是一旦你深入了解这俩个属性其实还不简单!! 就拿我今天遇到的需求来说，直接上原型图！

哈哈哈哈其实不是真正的原型图(哪有这么丑！其实也不丑) 这是我仿造原型图做的demo, 公司机密还是不方便直接放原型图的实现其实还是比较简单的话不多说 show code!

需求分析

header 和footer 是一个固定高度假设100px, main是视口剩余高度
实现如果main高度过小 main中的内容需要滑动展现
main的border需要图片来填充
main还有个flower需要展示

对应的解决方案是

整体就是一个column方向的flex布局， main直接flex : 1（flex-grow : 1）
超过main的部分用scroll来展示 overflow-y : scroll
border-image属性
可以直接伪元素main::before or main::after 然后absolute定位

初步探索

结构设计

html 复制代码

<div class="container">
<div class="header"></div>
<div class="main">
	<div>我是测试数据</div>
	<div>我是测试数据</div>
	<div>我是测试数据</div>
</div>
<div class="footer"></div>
</div>

层叠交互

首先可以先把boder样子画出来 main高度过小实现内容滑动

less 复制代码

* {
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
padding: 20px 40px 20px;
margin: auto;
border: 1px solid red;
display: flex;
flex-direction: column;
	.header {
	height: 100px;
	border: 1px solid black;
	}
	.main {
	border: 1px solid orange;
	margin: 20px 0;
	flex: 1;
	overflow-y: scroll;
	}
	.footer {
	height: 100px;
	border: 1px solid blue;
	}
}

添加border图片

css 复制代码

.main {
border:  solid transparent;
border-width: 20px 10px 30px 10px;
border-image: url('https://i.niupic.com/images/2023/09/12/bEcY.png');
border-image-slice: calc(4%) calc(10%);
margin: 20px 0;
flex: 1;
overflow-y: scroll;
}

border-width 给四个方向添加不同宽度分别是 top | right | bottom | left
border-image 加载图片
border-image-slice 实现border图片切片 top and bottom | left and right

具体细节可以查看mdn

给main添加flower

css 复制代码

.main{
	position : relative;
}
.main::before {
content:'';
bottom: calc(100% - 20px);
left: calc(100% - 280px);
position: absolute;
width: 245px;
height: 40px;
background-image: url('https://i.niupic.com/images/2023/09/12/bEcZ.png');
background-repeat: no-repeat;
background-size: cover;
}

用绝对定位和计算属性定位flower在border的位置

但是！！！！

怎么会出现这样的情况呢? 怎么被遮挡了 ==试试z-index !==

z-index: 99999;

发现我无论加多少权重多少9都没有办法实现我们想要的效果，这是怎么回事呢 ? 搜索！stackflow

结果是只能是将flower单独成一个div或者img标签成为main的同级元素，再用绝对定位实现

再度尝试

调整html结构

html 复制代码

<div class="container">
<div class="header"></div>
<div class="img"></div>
<div class="main">
	<div>我是测试数据</div>
	<div>我是测试数据</div>
	<div>我是测试数据</div>
</div>
<div class="footer"></div>
</div>

那么就不用为伪元素直接img类选择器

css 复制代码

.main {
border: solid transparent;
border-width: 20px 10px 30px 10px;
border-image: url('https://i.niupic.com/images/2023/09/12/bEcY.png');
border-image-slice: calc(4%) calc(10%);
margin: 20px 0;
flex: 1;
overflow-y: scroll;
position: relative;
}
.img {
z-index: 1;
bottom: calc(100% - 170px);
left: calc(100% - 280px);
position: absolute;
width: 245px;
height: 40px;
background-image: url('https://i.niupic.com/images/2023/09/12/bEcZ.png');
background-repeat: no-repeat;
background-size: cover;
}

大功告成！！

总结

在一个div或者其他块级标签中 overflow 和 z-index同时使用会出现不可预知的混乱
解决办法是要么就只用overflow 将需要用到z-index的元素用其他可替代的解决方案代替
如果非得要同时使用就必须修改html结构将需要z-index元素重排和overflow元素同级再使用绝对定位实现

全部代码在stackblitz中需要查看自取 stackblitz.com/edit/web-pl...

参考

stackoverflow.com/questions/3... developer.mozilla.org/en-US/docs/... developer.mozilla.org/en-US/docs/...