html5绝对定位案例,一线城市案例-相对定位和绝对定位-190322

摘要：

        相对定位和绝对定位的一线城市案例    相对定位和绝对定位的一线城市案例

/*背景*/

.div0{

width:600px;

height:600px;

position:relative;

}

.clear{ clear:both; }

/*统一给div加样式*/

.div1 ,.div2,.div3,.div4{

width:300px;

height:300px;

text-align:center ;

line-height:300px ;

font-size:50px ;

background: #e2dbbe;

}

/*背景和定位*/

.div2{

background: #ffee93;

position:absolute;

left:300px;

top:0px;

}

.div3{

background: #a3a380;

}

.div4{

background: #ffc09f;

position:absolute;

left:300px;

top:300px;

}

.div5{

/*背景颜色*/

background: #4cb4e7;

/*宽高*/

width:300px;

height:100px;

/*字体大小居中*/

font-size:40px ;

text-align:center ;

line-height:100px ;

/*绝对定位*/

position:absolute;

left:150px;

top:250px;

}

北京

上海

广州

深圳

四大一线城市

批改老师：灭绝师太批改时间：2019-03-22 11:35:52

老师总结：绝对定位在布局中算是比较难掌握的概念,记住:子绝父相哦!