博客
关于我
position: fixed如何相对父元素定位
阅读量:331 次
发布时间:2019-03-04

本文共 506 字,大约阅读时间需要 1 分钟。

在项目中遇到一个问题,项目中有一个弹框,弹框中有一个anchor组件,弹框中的内容可以滚动,而anchor组件需要相对于弹框保持固定。我们知道,position: fixed是相对于浏览器窗口进行定位,而弹框宽度是固定的,浏览器窗口的宽度则是不确定的,所以相对于浏览器窗口定位肯定不行。如何让anchor组件相对于弹框进行固定定位呢?

在这里插入图片描述

查了下资料发现,虽然position:fixed是对于浏览器窗口定位的,但是只要不设置fixed元素的top,bottom,left,right,此时该元素就是相对于父元素进行定位的。如果要移动元素的位置,可以通过margin来实现。

另外,固定定位的元素实际上会受到父元素的影响,导致“固定定位不固定”

  1. 因为fixed元素并不总是相对于视窗进行定位的,父元素发生变换,也就是transfrom属性发生改变,如平移或旋转,会对固定定位的子元素产生影响 例子:固定定位不固定。

  2. 如果父级元素的z-index的层次比同级元素低,就算fixed的z-index比父级高,也会被父级同级元素遮挡。

因此,position:fixed元素若要以窗口进行定位,最好是放在body根标签下。

转载地址:http://epye.baihongyu.com/

你可能感兴趣的文章
windows消息机制(转)
查看>>
STL笔试面试题总结(干货)(转)
查看>>
XML 和 HTML 之间的差异
查看>>
qt中moc的作用
查看>>
阿里钉钉面试题
查看>>
华为社招笔试
查看>>
MFC的Dlg和App什么区别?应用程序类与对话框类
查看>>
C\C++下获取系统进程或线程ID(转)
查看>>
VS环境变量(转)
查看>>
C++中找资源或者函数的方法
查看>>
一些留给自己的思考题(只求回过头来能够有所获)
查看>>
SQL函数返回表的写法
查看>>
delete对象时会自动调用类的析构函数
查看>>
C++ 子类对象直接赋值给父类对象可行,反过来不行
查看>>
WMWare下安装centOS7,并使用xshell进行连接记录.
查看>>
linux下同一个动态库名为何辣么多的.so文件
查看>>
SQL联表的方式(逗号, Left Join, Right Join)
查看>>
牛客网输入输出举例
查看>>
字符串初始化时的注意点
查看>>
dll路径加载顺序
查看>>