html设置层位置,div层位置固定和上下层次关系

div层位置固定和上下层次关系

2010-02-22 17:30

div层位置固定和上下层次关系

.fatherBox { position:relative; width:990px; margin:0 auto;}

.sonBox1{ position:absolute; left:100px; top:200px; width:300px; height:50px; background-color:#FF0000; z-index:1;}

.sonBox2{ position:absolute; left:200px; top:200px; width:100px; height:100px; background-color:#006666; z-index:0;}

第1个图层，浮动在第2个图层之上！

第2个图层

另外：

position的四个属性值：relative ，absolute ，fixed，static

下面分别讲述这四个属性，以简单代码表示

sub1

sub2

1. relative

relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：

#sub1

{