level 2
111ss73
楼主
了解web前端,和正在学习web前端的人们,应该都知道css样式中的position属性!
今天我们就来了解一下position属性!
position属性有四种值。分别是!
position:relative | absolute | static | fixed
下面我们来介绍一下这些之的定义!
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
在这是种值中!我们最常用两种那就是:relative / absolute 这两种!
那么这两种的在社么情况下使用呢?
relative是相对定位,是针对于上一个父元素的定位!
absolute是正对于全局的来进行定位!
1.可以位移的元素 (相对定位)
2.可以在任意一个位置的元素(绝对定位)
3.被关联的绝对定位
4.总在视线里的元素 (固定定位)position:fixed;
其中相应的举例都在华清远见!
2017年12月12日 07点12分
1
今天我们就来了解一下position属性!
position属性有四种值。分别是!
position:relative | absolute | static | fixed
下面我们来介绍一下这些之的定义!
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
在这是种值中!我们最常用两种那就是:relative / absolute 这两种!
那么这两种的在社么情况下使用呢?
relative是相对定位,是针对于上一个父元素的定位!
absolute是正对于全局的来进行定位!
1.可以位移的元素 (相对定位)
2.可以在任意一个位置的元素(绝对定位)
3.被关联的绝对定位
4.总在视线里的元素 (固定定位)position:fixed;
其中相应的举例都在华清远见!