541 固定定位不總是相對於瀏覽器視窗（viewport）進行定位
阿新 • • 發佈：2020-10-07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定定位（position: fixed）的特殊性</title> <style> /* 正常情況下，固定定位是相對於瀏覽器視窗（viewport）進行定位的，但是當其祖先元素中存在符合以下任意一個條件的元素時，固定定位元素會相對於該元素進行定位： 1、transform 屬性值不為 none； 2、transform-style: preserve-3d； 3、perspective 屬性值不為 none； 4、will-change 屬性 指定了上面 3 個 CSS 屬性中的任意一個； */ .fixed-wrap { width: 300px; height: 300px; background-color: hotpink; margin: 20px auto; /* css3 屬性 */ transform-style: preserve-3d; } /* 因為.fixed是.child1、.child2的父元素，不同層級的DOM元素，所以後兩者會層疊前者 */ .fixed { width: 260px; height: 260px; background: skyblue; position: fixed; z-index: 33; top: 0; left: 0; } /* .child1、.child2是同層級的DOM元素， .child2的z-index比.child1 的大，所以.child2層疊.child1*/ .child1 { width: 100px; height: 100px; background: green; margin: 10px; position: relative; z-index: -1; } .child2 { width: 100px; height: 100px; background: yellowgreen; margin: 10px; position: relative; z-index: 2; margin: -50px 0 0 30px; } </style> </head> <body> <div class="fixed-wrap"> <div class="fixed"> <div class="child1">child-11</div> <div class="child2">child-22</div> </div> </div> <div style="height:900px;"></div> </body> </html>