<!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>
<style?type="text/css">
body{?
margin:0;
padding:0;
font-size:30px;
color:#fff;
position:?relative;
}
.top{
position:?absolute;
top:?0px;
left:?0px;
background:?blue;
}
.main{
background:?red;
position:?relative;
}
.left{
background:?#abcdef;
width:?200px;
float:?left;
position:?absolute;
top:?0;
left:?0;
}
.right{
background:?green;
margin:0?0?200px?0;
}
.foot{
background:?#000;
clear:?both;
}
</style>
</head>
<body>
<div?class="top">top</div>
<div?class="main">
????<div?class="right">right</div>
????<div?class="left">left</div>
</div>
<div?class="foot">foot</div>
</body>
</html>
2017-02-25
body不用設置relative,此時.top中的absolute仍然以body絕對定位，這個時候你是看不到top，因為絕對定位挺復雜這里不多說，后面main又設置了relative,這時，.left對父元素main絕對定位，建議以后浮動和定位不要一起用。
這個代碼，你試試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{
font-size:30px;
color:#fff;
}
.top{
background: blue;
}
.main{
height: 300px;
background: red;
position: relative;
}
.left{
background: #abcdef;
width: 200px;
position: absolute;
top: 0;
left: 0;
}
.right{
background: green;
float:right;
}
.foot{
background: #000;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
? ?<div class="right">right</div>
? ?<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>