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

在项目中遇到一个问题，项目中有一个弹框，弹框中有一个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根标签下。