父级fixed_CSS3--改变固定定位(fixed)的父级定位元素

css--改变固定定位(fixed)的父级定位元素

固定定位并不是只能相对 body 定位, 它的父级定位元素是可以自己设置的

MDN 原文

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

就是说如果父级设置了transform,perspective,filter且不为none,那么它的子孙元素就会相对于这个父级进行固定定位

效果示例

代码

Document

.father {

width: 400px;

height: 400px;

/* 设置transform */

/* transform: translate