position:fixed 失效

Posted lilelile

tags:

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

如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 。

把 transform删除或设置为none就可以解决啦。

但是如果transform是必要的,不能删除,我们可以在此父级最外层再加一层元素专门用于定位,这样position:fixed就能生效啦。

举个栗子:

/* 一定要将ancestor和parent的大小设置为一样大*/
.ancestor{
position: relative; /*重点*/
width: 300px;
height: 300px;
}
.parent {
width: 300px;
height: 300px;
overflow: auto; /*重点*/
}
.child {
position: absolute;/*重点*/
width: 320px;
height: 320px;
}
嗯...大概意思就这样。

以上是关于position:fixed 失效的主要内容,如果未能解决你的问题,请参考以下文章

ios下position:fixed失效的问题解决

chrome 下 position:fixed失效(react)

解决position:fixed 固定定位失效问题

position:fixed失效情况

关于position:fixed;的居中问题

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