悬浮层在谷歌下不能position:fixed;问题

最新推荐文章于 2023-07-27 11:32:02 发布
最新推荐文章于 2023-07-27 11:32:02 发布
阅读量566 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35038331/article/details/73565172
版权

今天做公司的项目同事反映了一个bug,就是悬浮层position:fixed;在谷歌浏览器会有问题,我的是57版本,他的是55版本,我的不会出现这个问题,他的出现了,所以就找解决的办法,前人栽树,后人乘凉,三下五除二,找到解决方法

在定位元素上

加-webkit-transform:translateZ(0px);就显示正常了

整理琐碎的记忆
关注
React Native悬浮层，使用rn-overlay
我是码农
11-17 3842
React Native中的 Modal component 虽然是个很好用的组件，但它有着一些天生的缺陷，时常被开发者吐槽，在有些场景中不适用。 而众所周知，像 React Native 这样一个依赖开源社区的 Framework，其官方提供的组件是极其有限的，很多时候开发者需要到开源社区去寻找有没有想要的组件。而开源社区中的组件繁多，开发者需要花点时间去寻找、比较，才可能找到想要的。也有可能有满足需求的，但由于名气不够大，而没有被你找到。（非常怀念当年 Microsoft 独霸天下的年代，好矛盾的心态
布局解决悬浮固定导航栏遮挡页面主体内容问题（主要考虑遮挡锚点问题）
qq_39684484的博客
09-04 1956
# 布局解决悬浮固定导航栏遮挡页面主体内容问题（主要考虑遮挡锚点问题） 作者：吴业飞 时间：2018.06.21 --- 在工作中经常遇到使用`position: fixed;`固定在页面顶部的导航栏会遮挡页面主体内容，特别是在使用锚点跳转的时候，锚点默认跳转到视窗顶部，正好被导航遮挡。我使用过两种方式解决这个问题，各有优劣，视具体需求而定。 ## 导航fix定位下的解决方案 思路是将锚点安在真正要使用锚点定位的元素的上一个兄弟元素上，文字表述有点绕，show the code! 假设.
关于position:fixed定位的位置不对的问题（即没有按照浏览器的窗口进行定位）
brilliantSt的博客
07-27 1817
关于position:fixed定位的位置不对的问题（即没有按照浏览器的窗口进行定位）
固定位置不浮动属性
Jinx
10-17 1172
position:fixed; /* fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。 */
固定浮动窗positioin:fixed浏览器(IE6 IE7 IE8 IE9 Chrome Firfox)兼容性解决方案
huobengluantiao8
03-29 221
固定浮动窗就是固定在浏览器某个位置，不随滚动条而变动的窗体。 先贴代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="t...
position:fixed在chrome浏览器中无效
艾瑞-Arin
01-08 1165
在项目制作过程中发现position:fixed突然无效，后发现是因为父级div使用了css3中的transform:translateZ(0)属性，导致webkit内核的浏览器使用transform:translateZ(0)属性时，position:fixed无效。
chrome下positon:fixed无效或抖动的解决办法
weixin_30664615的博客
06-30 243
先来看一下我们要实现的效果 我想这种效果大家都有实现过，或者说吸顶的效果和这差不多 页面结构 js代码如下 /*吸顶*/ var $child = $("#child_3"); var $parent=$("#parent_3"); var w = $parent.width(); var tH = $ch...
右下角可收缩悬浮栏
05-22
可以使用`position: fixed`属性让元素相对于浏览器窗口固定，无论滚动条如何移动，该元素始终保持在屏幕的特定位置。结合`bottom`和`right`属性，可以调整悬浮栏在屏幕右下角的具体位置。 3. **悬浮栏设计**： ...
jQuery滚动视频悬浮.zip
01-16
position: fixed; bottom: 20px; /* 距离底部的距离 */ right: 20px; /* 距离右侧的距离 */ z-index: 999; /* 设置较高的层级，确保视频始终在前 */ opacity: 0; /* 初始时隐藏 */ } ``` 4. **jQuery脚本**：...
当页面有position:fixed的悬浮菜单时，如何调整锚定位的时候不被悬浮菜单挡住？
n1z1lam的专栏
04-24 4674
function locateAt(e){ e = document.getElementById(e);/*以id命名的锚点*/ y = e.offsetTop; while(e=e.offsetParent){ y += e.offsetTop;} y-=65;/*悬浮菜单的高度*/ window.scrollTo(0,y); }
HTML 文件 Edge 可以显示，Chrome不能显示的问题
farell的专栏
04-23 3348
写了个网页，在Edge上可以正常显示，Chrome上直接把源码显示出来了，后来发现是网页编码为utf-8 with BOM,改成utf-8后就OK！
css实现标签固定悬浮在某个位置(position:fixed)
热门推荐
Sunday97的博客
08-12 1万+
关键用到的就是固定定位（position:fixed）和层叠属性（z-index） <div class="fix-box"></div> <style> .fix-box{ text-align: center; top:35px; position:fixed; z-index:100; } </style> 知识点详细解析 position:fixed： 盒子将脱离原来的文本流，进入到新
position:fixed 兼容浏览器低版本
weixin_39037804的博客
09-04 461
项目中遇到的坑，写篇博客做个笔记纪念下，position:fixed一般来说都兼容各个浏览器，但是要兼容浏览低版本问题，就得用-webkit-transform: translateZ(0);这段代...
CSS position:fixed定位失效
码蝗的博客
03-04 784
首先看下MDN上是怎么说的：fixed: 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。What? 好吧，我承认这部分MDN看的实在是少，工作最初就接触html、css，遵循着老路就走下来了，这里有两个我之前不知道的概念，层叠上下文与元素祖先的 transform 属性非 none
layui将按钮固定在弹出框的底部位置，不滚动
wingsb的博客
08-18 1万+
layui将按钮固定在弹出框的底部位置，不滚动 <div class="layer-footer" style="position: fixed; bottom: 0;background-color:#ddd;width:100%;height:50px" > <button type="button" class="layui-btn layui-...
使用fixed定位将元素（如按钮）悬浮在页面底部
风雨飘飘飘啊飘的博客
06-30 7044
在开发过程中，会遇到将一个按钮或其他元素一直悬浮在底部的需求。 这个时候就需要用到fixed的定位方法： button{ 　　bottom:0; //可以更改为自己的需求距离底部的长度 　　position:fixed; } 拓展： 在css中，元素的定位方式一共有5种，分别为 1.relative：相对定位，在文档流中占据位置。 2.absolute：绝对定位，使用left、...
百度地图JS API不能使用position:fixed
weixin_34255055的博客
02-20 141
用于放置百度地图的dom元素及其任何一级父元素设置position:fixed属性时，js会报如下错误： Uncaught TypeError: Cannot read property 'offsetLeft' of null 解决办法：对地图使用position:absolut模拟fixed样式。 若要实现地图背景固定，前面列表滚动的样式，对前面列表使用overfollw-y:scrol...
position: fixed; position: absolute;的区别
最新发布
04-10
position: fixed; 和 position: absolute; 是CSS中两种常用的定位方式，它们有以下区别： 1. position: fixed;：元素的位置相对于浏览器窗口固定不变，不会随着页面滚动而改变位置。即使页面滚动，该元素也会始终...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值