您现在的位置是：网站首页> 编程资料编程资料

CSS属性之定位属性（图文详解）

2021-09-04 972人已围观

简介这篇文章主要介绍了CSS属性之定位属性（图文详解）的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。

 position: absolute; position: relative; position: fixed;

下面逐一介绍。

相对定位

相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

我们之前学习的背景属性中，是通过如下格式：background-position:向右偏移量向下偏移量;

但这回的定位属性，是通过如下格式：

 position: relative; left: 50px; top: 50px;

相对定位的举例：

Document有生之年
狭路相逢

效果：

相对定位不脱标

相对定位：不脱标，老家留坑， 别人不会把它的位置挤走 。

也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。

相对定位的用途

相对定位有坑，所以如果需要做一般不用于做“压盖”效果（把一个div放到另一个div之上）。页面中，效果极小。就两个作用：

（1）微调元素

（2）做绝对定位的参考，子绝父相

相对定位的定位值

left：盒子右移

right：盒子左移

top：盒子下移

bottom：盒子上移

PS：负数表示相反的方向。