固定定位的盒子先后顺序不同会不会导致效果不同

Question

 .d {
            margin: auto;
            height: 1400px;
            width: 800px;
            position: relative;
            background-color: brown;
            background: rgb(0, 0, 0, 0.3);
        }
        
        .w {
            position: fixed;
            left: 50%;
            margin-left: 400px;
            width: 100px;
            height: 50px;
            background-color: skyblue;
        }

   <div class="w">固定定位</div>   /*   1   */
    <div class="d">版心</div>
    <div class="w">固定定位</div>  /*   2  */

该代码是为了实现一个固定定位的小盒子始终紧贴版心，但为什么同一条语句出现的位置不一样效果就不同，上面的序号 1 语句可以，换到 2 就不行了。

Answer 1

没加top值
如果没有设置left、top属性的时候，会相对于父级元素进行定位，如果设置了left、top才会相对于窗口进行定位。可以相对父元素使用margin定位，且父元素的padding也是有用的，不同的是，该元素脱离了文档流。