CSS position 属性
1. static默认值。没有定位,元素出现在正常的流中(忽略 top,bottom,left,right 或者 z-index 声明)。
position
金黄色方块会在左上角显示,没有偏移。 2. fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left","top","right" 以及 "bottom" 属性进行规定。 这个比较好理解,只和窗口有关,与父元素,文档流都无关。
position
小广告效果:
position
...<...<...<...<...<...<...<...<...<...
...<...<...<...<...<...<...<...<...<...
...<...<...<...<...<...<...<...<...<...
...<...<...<...<...<...<...<...<...<...
...<...<...<...<...<...<...<...<...<...
3. relative生成相对定位的元素,相对于其正常位置进行定位。 相对元素正常应该在的位置移动,元素所占的空间位置不变,但是显示的位置发生偏移。 left是向右偏移,right是向左偏移(这么说好奇怪,但是…应该没错吧……),top向下偏移,bottom向上偏移。
position
4. absolute?生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。(如果没有这样的父元素呢?emmm……应该是整个文档最外层的框……吧…… 元素的位置通过 "left","right" 以及 "bottom" 属性进行规定。 absolute元素会附带??效果,同时,设置absolute后,元素会脱离文档流。 1. 如果不设置"left","right" 以及 "bottom",会显示在正常应该显示的位置。
position
2. 设置了偏移……(一下父元素全部指 static 定位以外的第一个父元素 设置了left 将以父元素的左边界为基准 向右偏移 垂直方向和之前相同。 设置了right 将以父元素的右边界为基准 向左偏移 垂直方向和之前相同。 设置了top 将以父元素的上边界为基准 向下偏移 水平方向和之前相同。 设置了bottom 将以父元素的下边界为基准 向上偏移 水平方向和之前相同。
position
5. othersinherit:继承父元素的值。 initial: 初始值,即默认值,static。 unset: 非继承属性,相当于initial,static。 6.?_<
position
<1. static
默认值。没有定位,元素出现在正常的流中。
<2. fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
<3. relative
生成相对定位的元素,相对于其正常位置进行定位。
<4. absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
<5. others
inherit & initial & unset
<6. navigation bar |