定位：
position:absolute; 绝对定位：设置该属性会脱离文档流，没有浮动效果，下面块会与上面重合。默认情况下，设置了绝对定位的块，它的top、left是相对于浏览器。当一个元素的父元素设置了绝对定位的时候，该元素在设置定位的时候（绝对、相对、固定），该元素的top和left相对的是父元素。
position:relative; 相对定位：设置该属性不会脱离文档流，浮动有效果，设置了相对元素的块，不管它的父元素是否有定位，它的top，lef始终相对于它的父元素。
只有设置了定位的块才有top，left属性。
div默认position:static; 存在于文档流，浮动有效果。
position:fixed; 固定定位：脱离文档流，不会出现滚动条。
用于布局的css技术：浮动、盒子模型、定位。
z-index:2; 层级显示 数值大的显示在最上面。
overflow：hidden 超出部分隐藏
auto 超出时候显示滚动条
scroll 不管超出没有都显示滚动条
======================================================================================================================================
布局实例；
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/demo.css" rel="stylesheet" />
</head>
<body>
<div id="dqq">
<div id="dtitle">
<h2><a href="javascript:;">汽车</a> /<a href="jacascript:;"> 在线购车</a></h2>
</div>
<div id="dtop">
<div id="dpic"><a href="javascript:;"><img src="image/2.jpg" /></a></div>
<div id="dword"><a href="javascript:;">8万元买到高品质 7月热销自主小型SUV推荐</a></div>
</div>
<div id="dlist">
<ul>
<li><a href="javascript:;">成都车展SUV新车亮点多 众泰T300售5.68-9.18万</a></li>
<li><a href="javascript:;">成都车展SUV新车亮点多 众泰T300售5.68-9.18万</a></li>
<li><a href="javascript:;">成都车展SUV新车亮点多 众泰T300售5.68-9.18万</a></li>
<li><a href="javascript:;">成都车展SUV新车亮点多 众泰T300售5.68-9.18万</a></li>
<li><a href="javascript:;">成都车展SUV新车亮点多 众泰T300售5.68-9.18万</a></li>
<li><a href="javascript:;">成都车展SUV新车亮点多 众泰T300售5.68-9.18万</a></li>
</ul>
</div>
</div>
</body>
</html>
css：
*{
padding:0px;
margin:0px;
font-family:"黑体";
list-style-type:none;
}
a{
text-decoration:none;
}
#dqq{
width:350px;
height:312px;
border:solid 1px #D2E1F1;
}
#dtitle{
height:32px;
line-height:32px;
background-color:#F6FAFD;
padding-left:10px;
}
#dtitle h2{
font-size:16px;
width:100%;
color:#0873C0;
}
#dtitle a{
font-size:16px;
color:#0873C0;
}
#dtitle a:hover{
text-decoration:underline;
}
#dtop{
height:76px;
width:100%;
margin:10px 0px;
}
#dpic,#dword{
float:left;
}
#dpic{
margin:0px 10px;
}
#dword{
width:180px;
margin-top:18px;
line-height:25px;
}
#dword a{
font-weight:100;
color:#3B639F;
}
#dword a:hover{
text-decoration:underline;
}
#dlist{
margin-left:10px;
}
#dlist li{
line-height:26px;
padding-left:5px;
}
#dlist li a{
font-size:14px;
color:#172C45;
}
#dlist li a:hover{
color:#F00;
}
原图：
实例图：