CSS之position的fixed属性

[tiodot]

一直以来深信元素设置position: fixed; 属性之后，位置是相对于浏览器的视口来设置的。因而这点而与absolute有所区别。然而事实没有绝对，有两种情况下fixed表现会和absolute一样:

1. 父元素设置 transform属性。设置transform属性之后，会生成一个层叠上下文(stacking context)，而正常情况下position: fixed也会创建一个层叠上下文，不知是不是因为这个原因导致即使设置为fixed也表现为absolute。

   <style>
       .parent {
           width: 70%;
           height: 200px;
           padding: 40px;
           background: gray;
           transform: translate(15%, 50%);
       }
       .child {
           position: fixed;
           top: 50px;
           left: 50px;
           right: 50px;
           bottom: 50px;
           background: red;
       }
   </style>
   <div class="parent">
   <div class="child"></div>
   </div>

   其效果为：

2. 在iframe中，如果设置元素position:fixed且其高度设置为100%，元素的实际高度是iframe的高度，而不是视口的高度。

参考

MDN position