CSS Position(定位)
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱。
Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。
position 属性值:
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规 定。
inherit:规定应该从父元素继承 position 属性的值。
我们最常用的的就是 absolute 和 relative 两种方式。
position 辅助属性:
①left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。
②right :表示向元素的右边插入多少像素,使元素向左移动多少像素。
③top :表示向元素的上方插入多少像素,使元素向下移动多少像素。
④bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。
上面属性的值可以为负,单位:px 。
Absolute 绝对定位
绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style type="text/css"> html body { margin: 0px; padding: 0px; } #parent { width: 200px; height: 200px; border: solid 5px black; padding: 0px; position: relative; background-color: green; top: 15px; left: 15px; } #sub1 { width: 100px; height: 100px; background-color: blue; position: absolute; top: 15px; left: 15px; } #sub2 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="parent"> <div id="sub1"> </div> <div id="sub2"> </div> </div> </body> </html>
注意:我们发现,由于我们对Sub1进行了绝对定位,Sub1的位置发生了偏移,而同级Div Sub2,则占据了Sub1的位置,并且Sub1遮挡了Sub2.
Relative 相对定位
相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style type="text/css"> html body { margin: 0px; padding: 0px; } #parent { width: 200px; height: 200px; border: solid 5px black; padding: 0px; position: relative; background-color: green; top: 15px; left: 15px; } #sub1 { width: 100px; height: 100px; background-color: blue; position: relative; top: 15px; left: 15px; } #sub2 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="parent"> <div id="sub1"> </div> <div id="sub2"> </div> </div> </body> </html>
注意:我们会发现Sub1进行了偏移,并不影响Sub2的位置,同时遮盖住了Sub2,切记偏移并不是相对于 Div Parent的,而是相对于Sub1 原有的位置。
Fixed 定位
固定定位;类似于absolute,但不随着滚动条的移动而改变位置。
<meta charset="utf-8"> <title>实例</title> <style type="text/css"> html body { margin: 0px; padding: 0px; } #parent { width: 200px; height: 200px; border: solid 5px black; padding: 0px; position: relative; background-color: green; top: 15px; left: 15px; } #sub1 { width: 100px; height: 100px; background-color: blue; position: absolute; top: 15px; left: 15px; } #sub2 { width: 100px; height: 100px; background-color: red; position: fixed; top: 5px; left: 5px; } </style> </head> <body> <div id="parent"> <div id="sub1"> </div> <div id="sub2"> </div> </div> </body> </html>
注意: 会发现Sub2 始终以body 进行定位。