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

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:负数表示相反的方向。

相关内容

-六神源码网