更新时间:2022-10-17 22:49:23
If supporting Internet Explorer 8 (and below) is not a concern, we could achieve that by pure CSS. Here is what you should know about CSS Transforms:
6 The Transform Rendering Model
For elements whose layout is governed by the CSS box model, any value other than
none
for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
Hence, we add a transform
with a value other than auto
to the grandparent element, we will be able to use fixed
positioning place the child element with the respect of the grandparent element which is creating the containing block.
For instance:
.grandpa {
position: relative;
height: 500px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.dad {
position: absolute;
width: 250px; height: 250px;
bottom: 4em; left: 4em;
}
.son {
position: fixed; /* This will be positioned with the respect to the grandpa
rather than the viewport */
width: 100px; height: 100px;
top: 2em; right: 2em;
}
Also, CSS Legendary Eric Mayer has written an article about this:
Un-fixing Fixed Elements with CSS Transforms
A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport.