css div距离上层 |css3旋转过程变换图像

然而，在使用CSS设置div样式时，大家可能会遇到一个问题，那就是div距离上层元素的位置不符合大家的预期。这时，大家需要通过设置div的position属性来解决这个问题。

div{
position: relative;//设置div的位置为相对定位
top: 20px;//设置div距离上方的距离为20像素
}

在这段代码中，大家将div元素的position属性设置为relative，这将使div相对于文档流的位置进行定位。接着，大家设置了top属性为20px，这将使div的顶部距离上方元素的顶部位置相差20px。

同样，大家还可以使用left、right、bottom属性来控制div距离其它方向的距离。例如：

div{
position: absolute;//设置div的位置为绝对定位
right: 20px;//设置div距离右侧的距离为20像素
}

通过这段代码，大家将div元素的position属性设置为absolute，这将使div相对于最靠近的已定位祖先元素进行定位。接着，大家设置了right属性为20px，这将使div的右侧距离其父元素的右侧位置相差20px。

除此之外，大家还可以将position属性设置为fixed，这将使div相对于浏览器窗口进行定位，无论滚动条如何滚动，div都会保持不变的位置。

综上所述，通过设置div的position属性，大家可以轻松地控制div距离上层元素的距离，从而实现大家所期望的页面效果。