固定定位失效问题（position：fixed;固定定位）

PC端项目：

父级设置了transform: translate(0, 0);后，子级的固定定位会失效：（解决办法，去除父级的transform: translate(0, 0); 即可）
html:

 <div class="guding"><div class="fixed-box"></div></div>

CSS代码：

.guding{// transform: translate(0, 0);//这行代码一旦打开，.fixed-box中设置的固定定位将失效。}
//固定定位
.fixed-box{position: fixed;//固定定位，常用作浮动的导航width: 100px;height: 100px;background-color: lightgreen;z-index: 1;//可以结合z-index提升层级
}

手机端项目：

只要父元素的 -webkit-overflow-scrolling 属性值为 touch，子元素的 position: fixed 属性就无效。：
css:

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

固定定位失效问题（position：fixed;固定定位）相关推荐

position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...
1、position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...
html 固定定位怎么居中,position fixed居中
position:fixed div如何居中据闻是以left right top bottom来定位的,那么剧中是怎么做的上下左右居div{position:fixed;margin:auto;le ...
postionfixed固定_详解如何解决position:fixed固定定位偏移问题
问题 css固定定位position:fixed很容易使用,就是相对浏览器的viewport进行定位,top:0;left:0就是在左上角. .container{ width: 100px; hei ...
html随页面移动固定,div设置了position: fixed属性后如何可以做到随浏览器左右移动？...
把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部. 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题.但问题是当浏览器 ...
CSS之定位布局（position，relative定位布局技巧）
文章目录 1.什么是定位: 2.各个属性值的描述: 3.各个属性值的具体作用: 4.定位布局技巧:position:relative 与 position:absolute 结合使用: 1.什么是定位 ...
移动端— position: fixed；固定定位解决方案
移动端- position: fixed;固定定位解决方案参考文章: (1)移动端- position: fixed;固定定位解决方案 (2)https://www.cnblogs.com/ruog ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
IOS 固定定位失效的分析与解决办法
1,固定定位失效首先查看是不是固定定位没有应用上(IOS和Android 都测试一下) 猜想一,父元素使用了 transform 属性解决方案 // 解决方法: .father{transform ...

固定定位失效问题（position：fixed;固定定位）

PC端项目：

手机端项目：

固定定位失效问题（position：fixed;固定定位）相关推荐

最新文章

热门文章