定位
定位属性列表position、top、bottom、right、left、z-index、position
基本语法:
position:static | absolute | fixed | relative
语法介绍:
static:默认值,无特殊定位。
absoulte:相对于其最近的一个定位设置的父对象进行绝对定位,可用left,right,top,bottom。
fixed:生成绝对定位的元素。
relative:生成相对定位的元素,可通过left,right,top,bottom属性设置相对于自身偏移位置。
代码:
div{
position:relative;top:-4px;
}
bottom
基本特殊:定位元素
基本语法:bottom:auto | length
语法
auto:默认值,无特殊定位。
length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。
代码:
div{
position:relative;bottom:6px;
}
z-index
语法:z-index:auto | number
取值:auto:默认值,number:无单位的整数值,可负数。
代码:
div{
position:absolute;z-index:5;width:6px;
}
left
基本语法:left:auto | length
auto:默认值,无特殊定位。
length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。
代码:
div{
position:relative;top:-3px;left:6px;
}
top
基本语法:top:auto | length
auto:默认值,无特殊定位。
length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。
代码:
div{
position:relative;top:-3px;left:5px;
}
right
基本语法:right:auto | length
auto:默认值,无特殊定位。
length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。
代码:
div{
position:relative;top:-3px;right:6px
}
相对定位
relative生成相对定位的元素,相对于其它位置进行定位。
代码:
#box1{
margin:10px;width:100px;height:100px;background-color: blue;
}
#box2{
margin:10px;width:100px;height:100px;background-color: red;/*position: relative;left: 100px; top:100px;*/
}
绝对定位
绝对定位相对于它的参照物移动位置,如果没有,默认为body为参照物。