理解css定位

       CSS中,style为样式,div为结构,高度宽度形成div,我们把它叫做盒子。

       内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。这四个东西,共同组成了盒模型。

       在CSS中使用绝对定位之后,对象就和文档流分离开来,自成一层,不会占用其他同位置div的空间,如果有多个绝对定位层叠的对象,可以用z-index来调整先后顺序,数字越大,等级越靠前。

 

绝对定位(absolute):

01 .div1{
02 width:50px;
03 height:50px;
04 position:absolute;
05 top:100px;
06 left:100px;
07 z-index:1;  
08 }
09
10 .div2{
11 width:50px;
12 height:50px;
13 position:absolute;
14 top:100px;
15 left:100px;
16 z-index:2;
17 }

 //此时两个div层叠,使用z-index控制先后顺序,div1在div2的下面! 

相对定位(relative): 偏移出了文档流,始终没有独立出去。位置会被保留。

ps:父类继承与崩塌:http://my.oschina.net/JoeUI/blog/136746

 

你可能感兴趣的:(css,定位,盒模型)