position: fixed如何相对父元素定位

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

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

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

因为fixed元素并不总是相对于视窗进行定位的，父元素发生变换，也就是transfrom属性发生改变，如平移或旋转，会对固定定位的子元素产生影响例子：固定定位不固定。
如果父级元素的z-index的层次比同级元素低，就算fixed的z-index比父级高，也会被父级同级元素遮挡。

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

position: fixed如何相对父元素定位相关推荐

CSS position: fixed 相对于父元素定位
使用 fixed 进行布局的元素,在一般情况下会相对于屏幕视窗来进行定位.但是如果父元素的 transform, perspective 或 filter 属性不为 none 时,position为f ...
position:fixed 实现相对于父元素定位
position:fixed 实现相对于父元素定位比如:中间内容区域的大小固定为1000px,对应不同的浏览器宽度,要使得某一个资源子固定在相对于内容区域的某一个位置,就不能使用 left:xxx, ...
html 相对于父标签位置,css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
当子元素用position:relative;时，父元素的overflow:hidden;在ie中失效的解决办法
当子元素用position:relative;时,父元素的overflow:hidden;在ie中失效的解决办法: 给父元素也加上position:relative; 到现在也不知道为什么会出现这样的 ...
html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
css审查元素一直有一块html,css父元素定位后子元素审查元素位置错乱
父元素position:fixed写了一个遮罩层,里面的子元素审查元素位置错乱,在超出这个元素的位置还能定位到这个元素直播平台授权 .toolstip { position: fixed; left ...
css position的父级,css position absolute 相对于父元素的设置方式
大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角. 有时候我们需 ...
fixed 相对于父容器定位
当一个元素设置为 fixed 或 absolute,不设置 top, left 则会在原位置,而脱离文档流,别的元素可以存在于它之后. 而当使用 fixed 后还想相对于父容器进行定位,或者说在当前位 ...

position: fixed如何相对父元素定位

position: fixed如何相对父元素定位相关推荐

最新文章

热门文章