z-index 层叠的一些细节

最近要把一个筛选的功能做组件化,涉及到了z-index 和定位的一些细节。z-index 的最大特点是它只有作用于定位的组件之上才有效果,比如 relative,absolute 或者 fixed。

其中 relative 很特殊,它不会脱离文档流,因此一旦 relative 定位的组件被渲染,会把父结点撑开,然后不管你怎么移动 transform 那个坑都会在。

相反 absolute 和 fixed 都脱离了文档流,因此它不会把父组件撑开,也不会留一个空白坑。其中 fixed 和 fixed 的图层处于同一维度。同一维度意味着父组件的范围可以限制子组件的表示范围,假如父组件写了 overflow:hidden,那么子组件也不会显示出来。

absolute 和其最近定位的父结点处于同一维度。同一纬度在上一段落已经得到解释。

最后,微信小程序组件中使用 fixed 定位很奇怪,模拟器可以但是 IOS 端不行。

发表评论

邮箱地址不会被公开。 必填项已用*标注