CSS定位也就是Position 属性在页面布局中经常会用到,Position 属性值有relative,absolute,fixed,static,inherit其中前三个是主要的,简单的定位应用没什么问题,但是嵌套起来,就会有些混乱,下面具体说说每个值的含义和特点。
一、relative
用于微调元素位置,让元素相对于自己原来的位置进行位置调整,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
例:
HTML:
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: #ccc;
}
.box2 {
position: relative;
top:50px;
left:50px;
}
效果图:
特点:相对定位不脱离标准流,在标准流中仍然占有位置,移动的相当于元素自己的影子。
作用:相对定位一般不用于做“压盖”效果,页面中一般用于微调元素位置和做绝对定位的参考(子绝父相)
二、absolute
绝对定位的参考点有点复杂,主要分为三种:
1、如果用top描述那么定位参考点就是页面的左上角,而不是浏览器的左上角
2、如果用bottom描述那么参考点就是浏览器首屏窗口尺寸
3、如果一个绝对定位的元素如果父辈元素(指的是祖先元素)也出现了定位的元素,那么将以这个定位了的父辈元素为参考点,如出现多个定位的祖先元素,以最近的祖先元素为准。如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位。
特点:绝对定位脱离标准流,标准流中的一切规则都绝对定位了的盒子无效(如:绝对定位的盒子如果不写width就不会继承父盒子的width),所以它可以覆盖页面上的其他元素,可以通过设置z-index属性来控制这些框的堆放次序。
注:position属性值为absolute、relative或fixed,用z-index此取值方可生效,默认值为0。
三、fixed
总是以body为定位对象的,相对于浏览器窗口进行定位,页面如何滚动盒子显示的位置不变,IE6不兼容
四、static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
五、inherit
规定应该从父元素继承 position 属性的值。