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