如何更好得理解position属性

来自:互联网
时间:2019-09-18
阅读:

在我们制作网页布局时很多情况要使用position属性。它主要有absolute,solution,static和fixed四个属性值,其中static是默认值,在不写position属性时默认情况下就是static,它遵循正常的文档流对象,会占用文档空间,并且在该属性下,top,right,bottom,left,z-index等属性都是是无效的。

absolute称为相对定位,它是以自身最左上角进行偏移定位,并且原先自身的位置还占据着。它附近的布局不会被破坏。

solution称为相对定位,它是以离它最近的父元素进行偏移定位,如果在没有absolute属性定位时,solution是以body进行偏移定位。所以大多情况我们是配合absolute一起使用。

fixed称为固定定位,它是以浏览器窗口的最左上点作为基点进行偏移定位的。其位置随时跟随浏览器大小的变化而移动,主要用于浏览器窗口的贴边定位。绝对定位(absolute)同样可以应用在固定定位的框架层里面。

以上三种定位属性都是以left,top,right以及bottom这四个属性值进行偏移定位的。

z-index称为对象的层叠顺序,它是以一个整数来定义堆叠的层次,整数值越大,则层叠离我们看到的方向越近。当然这是指同级元素间的堆叠,如果两个对象此属性具有同样的值或者在没有设置层叠顺序时,那么将根据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的。需要注意的是,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

总结:当用到以上几个定位属性时,我们会发现在实际应用中有很多的例子,比如纯CSS制作的“选项卡”,游览器最右下角的“返回顶部按钮”等都用到了定位(position)属性,尤其是在制作“选项卡”时,学好solution属性更为重要了。

position

返回顶部
顶部