首页 > 母婴教育 > 学习交流 > 如何应用CSS中position属性

如何应用CSS中position属性

   来源:秒知站    阅读: 1.14W 次
字号:

用手机扫描二维码 在手机上继续观看

手机查看

本文主要是简单的讲解下如何应用css position的各个属性的内容,以及如何应用。

操作方法

(01)首先,我们先简单了解下position的几个属性:static (默认值),relative (相对定位),absolute (绝对定位), fixed(固定定位)。小编将会在具体的实例中讲解...

如何应用CSS中position属性

(02)relative(相对布局):首先在CSS样式中创建一个方块,添加relative属性,然后根据位置从而理解。

如何应用CSS中position属性 第2张

(03)如图所示,数字是在图片的下方,也就是按照正常的从上到下布局,也会依据top,right,bottom,left等属性偏移相应的位置。

如何应用CSS中position属性 第3张

(04)absolute (绝对定位):了解了相对布局后,再看绝对定位,如图所示,数字在图片的下面,从顶上开始,也就是说图片脱离正常文档的布局,absolute也可以设置偏移量,使用top,right,bottom,left等属性便可。

如何应用CSS中position属性 第4张

(05)static (默认值):无特殊定位,与relative相似,区别在于不能进行移动,也就是说top,right,bottom,left等属性不会被应用。

如何应用CSS中position属性 第5张

(06)fixed(固定定位):这是一个很有趣的属性,它是固定在那一个位置,哪怕出现滚动条时,它都不会随之滚动。举个例子,最常见的就是广告,right,bottom,left等属性对其有效。(仔细看下面2张图的数字以及滚动条就能理解)

如何应用CSS中position属性 第6张
如何应用CSS中position属性 第7张

外语学习
校园生活
学习交流
资格考试
高考
科学
亲子