CSS fixed 布局嵌套的一些问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS fixed 布局嵌套的一些问题相关的知识,希望对你有一定的参考价值。

参考技术A 之前遇到过 fixed 布局嵌套的一些场景, fixed 布局是针对 body 定位的,但是在某些特殊情况下,子级的 fixed 会受到父级 fixed 的影响,除了需要 z-index 来区分层级,还要注意 transform 的使用(貌似好多地方 transform 都会引发问题)

一般的场景是一个遮罩加一个弹框

效果是这样的

这个时候在内部的 children 再使用 fixed 布局时,就会被父级的 fixed 元素限制住

1、父级不使用 tansform
2、不进行嵌套

以上是关于CSS fixed 布局嵌套的一些问题的主要内容,如果未能解决你的问题,请参考以下文章

CSS之定位布局(position,定位布局技巧)

嵌套和分段脆皮布局

CSS网页布局中易犯的10个小错误

探究position:fixed在css动画过程中的行为~

css flex-box嵌套布局有问题

css布局时,为啥fixed定位元素设置width:100%会超出父容器的右侧