css_position详解
1.position的属性值
值 | 描述 | 特点 | 使用场合 |
---|---|---|---|
static | 默认值,普通流定位。(top, bottom, left, right 和 z-index 无效) | 未对元素设置position,默认都是static定位 | / |
relative | 相对定位。 相对于它在正常流中的默认位置偏移。 | 1.相对于它在正常流中的默认位置进行偏移; 2.原位置依然占据文档流空间。 3.不会改变元素类型(块元素、行内元素、行内块元素) | 1.适合于移动较小的偏移; 2.原位置空出来也不影响整体页面美观的布局(源于原位置依然占据文档空间的限制) 3.配合absolute进行定位 |
absolute | 绝对定位。 相对于除static以外的第一个祖先元素进行定位。(直到向上查到html(chrome、firefox测试)为止) | 1.相对于除static以外的第一个祖先元素进行定位。 2.会脱离文档流,不会占据页面空间; 3.将元素变成块元素 | 经常和relative配合使用,比如下拉菜单、提示信息,元素的特殊布局(叠加)等。 |
fixed | 固定定位。 相对于浏览器窗口进行定位。 | 1.相对于浏览器窗口进行定位。 2.会脱离文档流,不会占据页面空间; 3.将元素变成块元素 | 1.广告信息; 2需固定在浏览器窗口某位置的操作按钮; 3.弹出框(登录框)的背景面板。 |
2.top、bottom、left、right
属性介绍:
top、right、bottom、left属性说明
值 | 描述 |
---|---|
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
top、bottom、left、right可能的值:
值 | 描述 |
---|---|
auto | 默认值。通过浏览器计算边缘的位置。 |
% | 设置以父元素的百分比计算的位置。可使用负值。 |
length | 使用 px、cm 等单位设置元素的位置。可使用负值。 |
inherit | 规定应该从父元素继承属性的值。(ie不可用) |
属性说明
1). 所有定位元素(static、absolute、relative、fixed)都有top等值,但是设置top等值只对absolute、relatvie、fixed有效!
2). static:static默认top等值为auto,给static元素设置top等值是无效的!
3). relative:如果原元素top和bottom值都为auto,则设置relative(不手动设置top、bottom值)后,top等值默认为0;如果其中之一为auto,则取另外一个值的相反数;如果都不是auto,bottom将取top的值的相反数。left的值始终等于right的值。
4). absolute:给元素仅仅设置了position:absolute; 效果是:这个元素变成了块元素(并体现它的特点,比如占一行、可设置width等);它脱离了文档流!!!;它的top等值并不会变化,还是原来的auto。(所以若不给position:absolute;的元素设置top等值,它的top等值是auto,位置不会发生变化)
5). fixed:同上absolute特点。
6). %是相对于父元素的值(这个值=padding值+内容的width/height)。
3.z-index
属性描述:设置元素的堆叠顺序。
属性说明:
1). 若不设置z-index,元素的z-index默认为auto。
2). 设置z-index只对absolute、relative、fixed有效,对static无效!!
3). absolute、relative、fixed的默认auto比static的默认auto要大,所以他们覆盖在static元素的上面。
4). 堆叠顺序的比较都是在同一层叠上下文内比较。
5). 层叠上下文的创建方式:
- 页面根元素天生具有层叠上下文,称之为“根层叠上下文”。
- z-index值为数值的定位元素的传统层叠上下文(不设置或者设置z-index:auto;的并不会产生层叠上下文)。
- 其他CSS3属性。
z-index参考资料:
- http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
- http://www.cnblogs.com/ForEvErNoME/p/3373641.html
- http://www.ituring.com.cn/article/68352
4.例子
4.1
4.1.1 html代码
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
4.1.2 css样式
.parent{
width:500px;
height:500px;
background:#f33; /*light red*/
margin:100px;
}
.parent>div{
height:100px;
}
.child1,.child2{
width:100px;
}
.child1{
background:#3f3; /*light green*/
}
.child2{
background:#33f;/*light blue*/
}
.child3{
width:200px;
background:#ff6; /*light yellow*/
}
4.1.3 显示效果
4.2
4.2.1 html代码
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
4.2.2 css样式
.parent{
width:500px;
height:500px;
background:#f33; /*light red*/
margin:100px;
}
.parent>div{
height:100px;
}
.child1,.child2{
width:100px;
}
.child1{
background:#3f3; /*light green*/
}
.child2{
background:#33f;/*light blue*/
position:absolute;
}
.child3{
width:200px;
background:#ff6; /*light yellow*/
}
4.2.3 显示效果
4.3
4.3.1 html代码
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
4.3.2 css样式
.parent{
width:500px;
height:500px;
background:#f33; /*light red*/
margin:100px;
}
.parent>div{
height:100px;
}
.child1,.child2{
width:100px;
}
.child1{
background:#3f3; /*light green*/
}
.child2{
background:#33f;/*light blue*/
position:absolute;
top:0;
}
.child3{
width:200px;
background:#ff6; /*light yellow*/
}
4.2.3 显示效果
4.1和4.2对比:
4.1是最普通的普通流定位,无需多言。4.2中给.child2多设置了position:absolute,显示结果发生了改变,如图4.2.3,原因解释:给.child2元素设置absolute定位,使得①.child2元素变成了块元素(当然它本身就是块元素)②.child2元素脱离了文档流,不再占据页面空间。所以当.child2脱离文档流之后,后面的.child3就和.child1上下相邻了(因为child2脱离出去了!)。其次因为只给.child2设置了position:absolute,而并没有设置top、left等值,所以.child2的top、left等值默认是auto,所以它的位置不会改变。(这里top、left等值默认是auto,同时参考物也是未设置position:absolute时的参考物,而并不是设置了absolute之后的html作为参考物)。 又因为child2(absolute)的z-index也没有设置,默认为auto,child3(static)的z-index也是auto,但是absolute的auto值是优先于static的auto值的,所以child2会覆盖在child3上面(因为child2的width是100px,child3的width是200px,所以child2只是覆盖了部分的child3)。
4.2和4.3对比:
4.3比4.2多了一项css设置:给.child2多设置了top:0。.child2的定位是absolute定位,根据规则:absolute相对于除static以外的第一个祖先元素进行定位。(直到向上查到html(chrome、firefox测试)为止),由以上规则我们知道.child2的top、left等属性的参考物是根元素html,4.3中top设置为了0,就是相对于html根元素top为0,所以就紧贴在html上边缘;又因为4.3并没有设置left/right,所以left/right值默认为auto,所以他们的横向位置并不会发生改变。