上课这点事-CSS知识

定位

定位属性列表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为参照物。