fixed定位

黑马晓程序 2023-01-13 02:12:41

课时名称	课时知识点
fixed定位	小程序fixed定位使用方法及场景介绍

...全文

318 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

Aphorism Preface 差不多有半年没有更新blog了，现在在新的公司适应了，最近喜得一千金，也慢慢适应了新的生活。今天更新一篇关于最近遇到的 ios fixed定位元素丢失 bug iphonex 上 Date 兼容问一. fixed问题现象手机环境： ios 11.0.3 预期的展示效果：图片显示完成，添加作业按钮正常 fixed定位实际展示效果：图片显示不全，且fixed 定位元素消失了如下图，添加作业按钮（fixed定位）对应的父元素高度没有撑开全屏，这

有时候想实现fixed定位的效果但是又不想用fixed定位，就写了个demo，absolute模拟fixed定位 <div class="div1"> <div class="dd1"> <div class="d1"> a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i </div> </div> &

问题描述之前在项目中，遇到了一个场景，需要实现相对于父元素的fixed定位：在父元素内拖动滚动条时，"fixed"定位的元素不能滑动，在外层拖动滚动条时，父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位，不能直接实现我们需要的效果。在网上搜索看到一个还不错的解决方案，不过利用了CSS3的transform，兼容性不是很好。解决思路????这是我们希望的效果...

分析后可知，元素设置了transform属性后会创建一个containing block，这个containing block将重新定义其内部固定定位元素的定位参照点（创建这个containing block元素的padding box），最终固定定位的效果退化为绝对定位。当position属性设置为fixed时，如果该元素的祖先元素设置了transform等属性后，则定位从原来的相对于视口，改为设置了特殊属性的祖先元素。解决方法：尽量不要在可滚动的容器内包含fixed定位的子元素。

朱学超的课程社区_NO_1

1

社区成员

87

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章