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

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

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

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

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

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

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