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定位

初步探索

结构设计

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

层叠交互

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

* {
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;
	}
}

1. 添加border图片

.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

1. 给main添加flower

.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结构

<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类选择器

.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/…