开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么position: fixed；不能在CSS中工作？

position: fixed是CSS中的一个定位属性，用于将元素固定在页面的某个位置，不随页面滚动而移动。然而，position: fixed在某些情况下可能无法正常工作，具体原因如下：

浏览器兼容性问题：position: fixed在一些旧版本的浏览器中可能不被支持或存在兼容性问题。特别是在移动设备上，一些旧的浏览器可能无法正确解析该属性。
父元素的定位属性：如果父元素的定位属性不是static（默认值），而是relative、absolute或fixed，那么position: fixed的表现会受到父元素定位属性的影响。如果父元素的定位属性是relative或absolute，那么position: fixed会相对于父元素进行定位，而不是相对于整个页面。
滚动容器的限制：如果元素的父元素或祖先元素设置了overflow: hidden或overflow: auto，并且滚动容器的高度小于元素的高度，那么position: fixed可能无法正常工作。因为滚动容器的限制会导致元素在滚动时被裁剪或隐藏。
CSS属性z-index的影响：如果其他元素的z-index值比position: fixed的元素高，那么position: fixed的元素可能会被覆盖或隐藏。
其他因素：还有一些其他因素可能导致position: fixed无法正常工作，例如使用transform属性、使用CSS动画等。

总结起来，position: fixed在CSS中可能无法正常工作的原因主要是浏览器兼容性问题、父元素的定位属性、滚动容器的限制、z-index值和其他因素的影响。在实际开发中，如果遇到position: fixed无法正常工作的情况，可以尝试使用其他定位属性或通过调整相关CSS属性来解决问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai_services
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc

相关搜索:CSS - background-position: top 150px不工作为什么背景图像不能在css中工作，而能在html中工作？hold_position或Hold_position在kableExtra中不工作？为什么手机的内部CSS不能在gmail中工作？为什么我的css动画不能在Safari中工作？为什么背景图像css不工作？为什么我的$().css({ "visibility"："visible"})不工作？为什么我的top: 50% CSS不工作？为什么我的React Bootstrap CSS不工作？为什么google字体不能在Heroku中工作，而能在本地工作？为什么我的CSS类不能在edge上工作 CSS过渡在chrome中工作，但不能在safari中工作为什么ordinalIndexOf()不能在groovy中工作？为什么保存不能在Django中工作？为什么lubridate不能在闪亮中工作？为什么withErrors不能在Laravel中工作？为什么.data="[filepath]“不能在in中工作？为什么GestureDetector不能在flutter中工作？为什么rsync不能在bash中工作？为什么TextEditingController不能在flutter中工作？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

原本buttom_submit是通过position:fixed; bottom:0px;来定位到底部的, 然后结果显示那里做相同高度的padding的 , 所以还原问题配置 ?...有兴趣可以到这里改css试试那么问题来了所以动画过程中的position:fixed失效了 ? 是不是回归到文档流?.../right正常 , 并且配合margin也是正常的 , 调节其值也是有效果的从bottom修改为top的表现 , 可以看出这时候的布局是参照所参与transform变换的元素还有postion:fixed...会导致一丢丢的垂直位置偏移这就奇了怪了, position:fixed + top/bottom 才会导致各种布局失效 , left/right 却是正常的 , 怪怪的~~ 那么说好的探究捏?...看来是需要真的了解fixed的布局的实现机制了~ 允许我先Google Google~ 找到了这篇~CSS3 transform对普通元素的N多渲染影响还有这篇transform你不知道的那些事剩下的读者继续谷歌吧

1.6K1 0

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

补充: 是指transform动画想要的效果原本buttom_submit是通过position:fixed; bottom:0px;来定位到底部的, 然后结果显示那里做相同高度的padding的..., 所以还原问题配置但是动画效果是这样的有兴趣可以到这里改css试试那么问题来了所以动画过程中的position:fixed失效了 ?.../right正常 , 并且配合margin也是正常的 , 调节其值也是有效果的从bottom修改为top的表现 , 可以看出这时候的布局是参照所参与transform变换的元素还有postion:fixed...会导致一丢丢的垂直位置偏移这就奇了怪了, position:fixed + top/bottom 才会导致各种布局失效 , left/right 却是正常的 , 怪怪的~~ 那么说好的探究捏?...看来是需要真的了解fixed的布局的实现机制了~ 允许我先Google Google~ 找到了这篇~CSS3 transform对普通元素的N多渲染影响还有这篇transform你不知道的那些事剩下的读者继续谷歌吧

1.7K6 0

CSS中calc(100%-100px)为什么不加空格会不生效？

css3的计算属性，用于动态计算长度值。...但是这个例子，只能较好的解释为什么在'-'后面加空格。为什么前面也要加空格？...但是'px-100px'不属于CSS中任何一个单位，也并无单位的定义。（这个案例，会更加好的解释，为什么'-'的前后都需要加空格。）...源码为什么怎么写？ 为什么要把'-'放在里面？我们写成calc(100% -100px)或者calc(100px -100px)为什么不行？...因为在CSS中是有负数的概念的，就像margin和padding中会常常用到负数。再引出一个新的例子： width: calc(500px - -100px); 复制代码再遇到这种情况怎么办？

5643 0

为什么从乙方出来的技术人，能在工作中 ‘更猛，更持久’？

俗话说，“阳春三月，春光明媚，一年之计在于春”，但这句话如果用来形容处于春季中的技术团队，恐怕会引来一阵虚声。...即便你个人的影响力达到极高的程度，或许也无法在与 “独角兽” 争夺人才的战斗中讨得便宜。该采取什么样的应对措施呢？ “拥抱现实，应对现实” ，这是《原则》中让我记忆较为深刻的一句话。...为什么 “更猛，更持久” ？不可否认，有许多企业排斥从 “乙方公司” 出来的小伙伴，甚至根本不看类似的简历。...可是你却永远不在自己的公司工作，又怎么可能有归属感呢？...这时候，也许你就要再重新考虑住处和交通了，因此换工作的可能性会非常大。

4682 0

CSS中calc(80vw - 100px)为什么不加空格会不生效？

css3的计算属性，用于动态计算长度值。...但是'px-100px'不属于CSS中任何一个单位，也并无单位的定义。（这个案例，会更加好的解释，为什么'-'的前后都需要加空格。）...源码为什么怎么写？为什么要把'-'放在里面？我们写成calc(100% -100px)或者calc(100px -100px)为什么不行？...因为在CSS中是有负数的概念的，就像margin和padding中会常常用到负数。再引出一个新的例子： width: calc(500px - -100px);再遇到这种情况怎么办？...因为在CSS中是有负数的概念的，就像margin和padding中会常常用到负数。再引出一个新的例子： width: calc(500px - -100px);再遇到这种情况怎么办？

40110 0

CSS粘性定位 - 它的真正工作原理！

这篇文章详细解释了CSS中的sticky定位方式，并讲解了它的工作原理。 CSS中的sticky定位有很好的浏览器支持，但许多开发者并没有使用它。...我假设你们都知道CSS定位，但让我们简要回顾一下：直到3年前，有四个CSS位置： static ， relative ， absolute 和 fixed 。...static 或 relative 与 absolute 或 fixed 之间的主要区别在于它们在DOM流中占用的空间。...CSS Sticky 定位的真正工作原理！ CSS 的 sticky 定位有两个主要部分，即粘性元素和粘性容器。粘性元素 - 是我们使用 position: sticky 样式定义的元素。...Fixed - 当项目固定时，它的行为与 position: fixed 完全相同，浮动在视口的相同位置，从流中移除。

2872 0

不受控制的 position:fixed

大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。...那么，为什么会发生这种情况呢？说好的相对视口（Viewport）定位呢？这个问题，就牵涉到了 Stacking Context ，也就是堆叠上下文的概念了。... 中指定了任意 CSS 属性不同内核的不同表现完了吗？...或者是在 position: fixed 中使用了 input 也会存在一些问题，这个有很多文章都描述过并且存在很多解决方案，本文不讨论这块问题。...这方面的问题，可以看看这篇文章：移动端web页面使用position:fixed问题总结最后系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。

2.2K4 0

54个CSS重难点整理，12-24篇，进阶高薪必需要掌握的知识点

20、为什么有时候用translate来改变位置而不是定位? 21、清除浮动的3种方式 22、position的属性有哪些？共同点与不同点？...20、为什么有时候用translate来改变位置而不是定位?...在 position:relative 与 position:fixed 定位之间切换。而当页面滚动超出目标区域时，它以固定定位呈现，否则以相对定位呈现。...在有滚动条的页面中，absolute 会跟着父元素进行移动，fixed 固定在页面的具体位置。...3、如果 position 的值不为 absolute 或者 fixed，则判断 float 属性的值是否为 none，如果不是，则 display 的值正常生效。

1.3K1 0

【CSS】布局属性：position

答案是:position position position:static; (默认值) 没有定位，元素出现在正常的流中，top, bottom, left, right, z-index 属性不生效。...这是position属性中，唯一不能定位的样式。 position:relative; 生成相对定位的元素，相对于其正常位置进行定位。...因为相对于元素原本位置（static）进行定位，所以无法使用z-index属性，只能在同平面上进行定位。...position:fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。...试父布局情况而定练习：试一试 p.one { position:fixed; top:30px; right:5px;

5303 0

CSS粘性定位是怎样工作的

我假设你们都知道什么事CSS定位，不过还是先简单回顾一下比较好：在3年前，有四种 CSS 定位： static、 relative、 absolute 和fixed。...static 、 relative 、 absolute 和 fixed之间主要的区别在于它们在DOM流中占用的空间。...当我在包装元素中添加更多元素时，它就能开始正常工作了。这是为什么？这是因为当一个元素被赋予 position: sticky 样式时，粘性项目的容器是它可以粘贴的唯一区域。...这就是为什么在前面的例子中，粘性元素没有被粘住的原因：这个粘性元素是粘性容器中唯一的子元素。 CSS 粘性定位的示意图： ?...固定 —— 当元素被粘住时，它的行为与 position: fixed 完全相同，浮动在与视口的相同位置，并从流中移除。

1.8K1 0

【前端词典】提高幸福感的 9 个 CSS 技巧

这里是不是有人问为什么呢？...2. position:fixed 降级问题不知道曾经的你是不是遇到吸顶效果，就是使用 position:fixed 这个属性。...合理使用 px | em | rem | % 等单位在 CSS 中有许多距离单位，比如 px | em | rem | %，还有 CSS3 中的 vh | vw 等单位。...变量使用的语法是：var(*)；无论是变量的定义和使用只能在声明块 {} 里面 CSS 变量字符限制为： [0-9]、[a-zA-Z]、_、-、中文和韩文等。...我们知道内联 CSS 能够使浏览器开始页面渲染的时间提前，即在 HTML 下载完成之后就能渲染了。既然是内联关键 CSS，也就说明我们只会将少部分的 CSS 代码直接写入 HTML 中。

8712 0

reflow和repaint（摘录自张鑫旭的翻译）

fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）权衡平滑和速度（Trade smoothness...动画效果应用到position属性为absolute或fixed的元素上动画效果应用到position属性为absolute或fixed的元素上，它们不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流...动画元素每次移动3像素可能在非常快的机器上看起来平滑度低了，但它不会导致CPU在较慢的机器和移动设备中抖动。避免使用table布局避免使用table布局。...然而有另外一个原因为什么表格布局时很糟糕的主意，根据Mozilla，即使一些小的变化将导致表格(table)中的所有其他节点回流。...精简css，去除没有用处的css 3. 如果你想让复杂的表现发生改变，例如动画效果，那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它。 4.

1.1K4 0

mask遮罩层的华丽写法

mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; left...不也还是露怯么！属于治标不治本型的。...也不行不知道是不是css是rem而我设置px的原因反正都没解决但是js动态设置高度后，我无意识的将position:absolute;改成了position:fixed; 妈耶效果好了！...刚就改了两个地方，于是，我把目光瞄准了css 尼玛，原来就是fixed和absolute的区别啊！...好了，问题这次真的解决了，测试了很多不同分辨率都OK .mask{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left:

1.7K2 0

为什么 CSS 这么难学？

本文来自知乎上的问题回答——为什么 CSS 这么难学？本文节选自方应杭的回答。你可以通过点击文章下方的阅读原文来访问知乎问题地址因为 CSS 不正交什么是正交？...我再举第二个例子，大家都知道 position: fixed 是相对于视口（viewport）定位的。...接下来我在 .box 上面加一个 CSS3 中的属性，就会改变你的认知：父容器加了 transform 之后，fixed 定位的元素居然相对于父容器定位。...上文列举的问题能在规范里找到解释不能说明 CSS 是正交的，因为正不正交应该是从表面上就能看出来的。正交一般都是对接口的约束，具体实现我不管的。...我是这么觉得的，如果有人问 CSS 为什么这么难学，我们就应该好好回答 CSS 为什么这么难学；至于 CSS 多牛逼，应该另开一个问题。

8556 1

【前端词典】提高幸福感的 9 个 CSS 技巧

这里是不是有人问为什么呢？...2. position:fixed 降级问题不知道曾经的你是不是遇到吸顶效果，就是使用 position:fixed 这个属性。...合理使用 px | em | rem | % 等单位在 CSS 中有许多距离单位，比如 px | em | rem | %，还有 CSS3 中的 vh | vw 等单位。...变量使用的语法是：var()；无论是变量的定义和使用只能在声明块 {} 里面 CSS 变量字符限制为： [0-9]、[a-zA-Z]、_、-、中文和韩文等。...我们知道内联 CSS 能够使浏览器开始页面渲染的时间提前，即在 HTML 下载完成之后就能渲染了。既然是内联关键 CSS，也就说明我们只会将少部分的 CSS 代码直接写入 HTML 中。

7093 0

年薪30万的前端面试题，你能答对几道？|附答案

5.HTML5 为什么只需要写 !DOCTYPE HTML？...在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？...:relative 和 left:50%，子元素设置 position:relative 和 left:50%；垂直居中设置：使用position:absolute（fixed）,设置left、top...、margin-left、margin-top的属性; 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了; 利用display:table-cell属性使内容垂直居中...解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等） 5.你常用的开发工具是什么，为什么？

5.6K6 0

问题总结

在此记录遇到的问题和理解，希望能在日后的应用学习和工作中更加透彻的理解。...关于CSS中position定位：开始学习的时候简单粗暴的总结了 absolute; 绝对定位（相对于浏览器边界），拉动滚动条，位置随之改变。...后来，看到了两次理解本身就具有矛盾，又回去看了一下并进行了实验，查资料，发现： position:relative | absolute | static | fixed static(静态) ...注： CSS中定位的层叠分级：z-index: auto | namber; 总结： absolute; 绝对定位（相对于浏览器边界）选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性...CSS选择器的两种理解方式：最初接触到css，对选择器是这样理解的：设置一个id或者类，然后再元素中引用或者应用这个id或者类。

6315 0

第213天：12个HTML和CSS必须知道的重点难点问题

12个HTML和CSS必须知道的重点难点问题这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？...几个属性的作用 position 的常见四个属性值: relative，absolute，fixed，static。...如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。 **fixed:固定定位。...注意设置 fixed 属性的元素在标准流中不占位置。 3.浮动与清除浮动 3.1 浮动相关知识 float属性的取值： left：元素向左浮动。 right：元素向右浮动。 none：默认值。...响应式开发利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

2.3K2 0

前端学习(14)~css学习(八)：定位属性

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 position: absolute; position: relative; position: fixed; 相对定位相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。...让绝对定位中的盒子在父亲里居中我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。... .backtop{ position: fixed; bottom: 100px;...没有什么用，就去掉就行了*/ _padding-top:0; } .nav{ position: fixed;

9222 0

table固定表头，tbody滚动条样式设置以及填的几个坑

工作中或许会用到 table 表格固定表头， tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。 ?...今天研究了一下，整理了几种方案：有的建议使用：position: absolute 或者 position: fixed; .table thead{ position: absolute;... top: 0; left: 0; } 或者 .table thead{ position: fixed; } 但是会有一些问题，比如 tbody 会上移，与 thead 重叠...如果表格宽度是 100% ，可以给前几列固定宽度，最后一个不设置，使其宽度自适应。...注意：只能在 table 或 colgroup 元素中使用标签。

13.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭