DIV+CSS布局2

布局相关属性：

定位方式 —— position:relative（正常定位）absolute（根据父元素进行定位）fixed(根据浏览器窗口进行定位) static（没有定位）inherit（继承） 

定位 —— left （左） right(右)  top(上)  bottom(右)

优先级——z-index:n  层覆盖先后顺序，n值越大，显示在越上层

显示属性——display：none(层不显示)  bloc(块显示)  inline(内联显示)

---

一、定位方式和定位

1.relative正常定位

.div1{

background-color:red;

position:relative;

left:20px;

top:20px;

}

2.absolute根据父元素进行定位

.div2{

background-color:red;

width:100px;

height:100px;

position:absolute;

left:20px;

top:20px;

}

3.fixed根据浏览器窗口进行定位

.div3{

background-color:blue;

width:60px;

height:120px;

position:fixed;

left:10px;

top:10px;

}

---

二、优先级

z-index:n  层覆盖先后顺序，n值越大，显示在越上层，默认n=0

.div1{

background-color:green;

width:200px;

height:200px;

position:relative;

left:100px;

top:200px;

z-index:2;

}

.div3{

background-color:red;

width:100px;

height:100px;

position:absolute;

left:20px;

top:20px;

z-index:1;

}

---

三、显示属性

display：none(层不显示)  bloc(块显示)  inline(内联显示)

.div4,.span1{

background-color:green;

}

.div5,.span2{

background-color:red;

}

.div4,.div5{

display:inline;

}

.span1,.span2{

display:block;

}

待续。。。