css 定位失效 fixed 定位屏幕底部不起效

于 2024-06-27 14:17:33 发布
阅读量152 收藏
点赞数 2
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Edwin_jade/article/details/140012474
版权

原因是父级元素存在 

 will-change: transform;

或者 transform元素等

去除就好了 

我这边是因为加了个背景图片变清洗的样式导致出现这种 奇葩问题 定位不在屏幕底部 而是一旦内容超出一个屏幕后 他就会跟在最后门

Edwin_jada
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
positon:fixed定位失效
FEE
02-14 1252
positon:fixed---绝对定位 元素将相对于屏幕视口（viewport）的位置来指定其位置，并且元素的位置在屏幕滚动时不会改变。 fixed 属性会创建新的层叠上下文（Stacking Context）。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。 Stacking Context---层叠上下文 层叠上下文是HTML元素的三维概念，这些HTML元素...
前端学习（38）：css颜色小练习
歌谣的博客
12-07 357
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
css导致position:fixed属性不生效的原因
cy1502的博客
05-12 750
1.transform 属性值不为 none 的元素;2.父级元素存在position:fixed;
css样式 position: fixed 失效，和 position: absolute 效果一样
最新发布
学敲代码的Stars的博客
05-18 188
祖先元素使用了 "transform"导致。将需要绝对定位的元素直接挂载在body下，使用vue3新特性teleport。
fixed定位失效问题如何解决
qq_43680154的博客
08-26 2000
如何解决fixed定位的问题
解决position：fixed 固定定位失效问题
热门推荐
铁锤妹妹的博客
05-22 1万+
最近在项目开发过程中遇到了一个固定定位失效的问题，当给底部定位元素设置了position： fixed并设置了距离top和left，bottom的距离之后发现位置居然一直不正确，fix固定定位失效了。 百度看了些文章说是父元素如果存在 transform 属性或者移动端设置-webkit-overflow-scrolling属性时会出现同样的问题 我的页面父元素未设置 transform ，就全局搜索了-webkit-overflow-scrolling，发现全局样式里设置了，百度了-webkit-over
css中postion的fixed与absolute区别详解
09-25
举个例子，如果你有一个导航栏设置为fixed定位，它将始终固定在屏幕顶部，即使用户向下滚动页面。fixed定位的参照点是浏览器窗口的左上角，即坐标点为(0px, 0px)，因此，无论页面如何滚动，元素都会保持在这个点相...
iphone safari不支持position fixed的解决方法
09-05
在移动Web开发中，`position: fixed` 是一个常见的CSS属性，用于使元素相对于浏览器窗口固定定位，无论页面如何滚动，该元素始终保持在屏幕的某个位置。然而，苹果的iPhone Safari浏览器在早期版本中并不完全支持这...
JavaScript Table行定位效果
05-20
第一个问题是fixed的tr在ie7中不能进行定位，而且td在定位后并不能保持在表格中的布局，这样在原表格插tr就没意义了。 ps：fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table，并把源tr克隆到...
项目中碰到的css兼容问题小结
09-25
不同的浏览器对CSS规则的解析和实现可能存在差异，导致在某些浏览器上显示效果不尽如人意。以下是一些关于CSS兼容性问题及其解决策略的详细说明： 1. **背景图片垂直平铺问题**： `background-repeat: repeat-y` ...
解决iframe中fixed失效的问题
05-31
这是一个解决fixed在iframe中失效的解决案例，只要把文件放到编辑器中打开即可看到效果
使用css transition属性实现一个带动画显隐的微信小程序部件
09-27
【CSS Transition属性在微信小程序中的应用】 在网页和应用程序开发中，CSS Transition是实现动态效果的重要工具，它可以平滑地改变元素从一种样式到另一种样式的过渡效果。在微信小程序中，开发者同样可以利用CSS ...
position: fixed定位失效原因及解决方案
surui0419的博客
11-28 6426
position: fixed问题分析
不受控制的 position:fixed (失效)
小妖666个人笔记
09-21 613
position:fixed的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 但是，在许多特定的场合，指定了position:fixed的元素却无法相对于屏幕视口进行定位。这是为何呢？ 当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。 通俗的讲就是指定了 position:fixed 的元素，如果其祖先元素...
css fixed 失效问题解法
aechi62008的专栏
03-15 232
https://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome 开启css硬件加速，transform: translateZ(0); 更好的办法是: 调整布局，把父元素的absoluate 属性去掉 转载于:https://www.cnblogs.com/daowangzhizhu-pt...
css篇 ：fixed定位失效（变成absolute特性）
qq_34701838的博客
12-02 1021
如果祖级元素有定义任何标签定义了：transform: inherit |initial |unset 的任何其它属性值都会将fixed变为absolute特性，无法相对于窗口document去进行定位；
CSS - 元素遮挡（层级/定位等等）导致无法点击下层元素解决方案
王佳斌
05-08 7950
前言 如果遇到因 层级 定位 其他原因 导致点击不到下层元素，如下图所示： 解决方案 pointer-events 文档：https://www.w3school.com.cn/cssref/pr_pointer-events.asp 不需要调整什么 z-index 层级还是相对绝对定位，直接使用 鼠标穿透属性 pointer-events。 需要注意的是，有些情况并不适用。 /* 给父元素(遮挡的元素) */ .div{ pointer-events: none; } ...
css2.1--笔记4（fix失效+总结）
ABU_MOlI_ITUI的博客
08-12 254
解决ie6底下fixed失效问题： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>fixed</title> <style type="text/css"> *{ margin: 0; padding: 0; } #test{ position: fixed; width: 100px
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值