有關定位的問題哪個大神給指導下
<!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;background:#000;font-size:20px;
}
.top{
? ? width:100%;height:100px;background:#ccc;
}
.main{
? ? width:100%;height:500px;background:red;
? ? }
.right{
? ? height:500px;background:green;position:absolute;right:0px;left:210px;
}
.left{
? ? width:200px;height:500px;background:blue;
? ? float:left;
}
.foot{
? ? width:100%;height:100px;background:orange;
}
</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>
這里只給right設置了絕對定位，它上面的父元素都沒有設置定位，它理應來說應該是相對于body絕對定位，但執行的結果是相對于父元素main絕對定位的，這個怎么解釋
2017-06-14
其實你的理解沒有錯，之所以你有這樣的誤解，你可以試一下將main的margin-left：10px時，你會發現left向右移動了10px，而right卻沒有移動，left和right緊貼在 了一起。你就說明了他的定位確實是相對了body來的。
2017-03-02
但是我試過了，如果定義一個塊級父元素box1和一個塊級子元素box2，給子元素box2絕對定位，執行結果是子元素相對body的絕對定位，不是相對于box1的絕對定位，實例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box1{
width:300px;
height:300px;
background:red;
margin:10px 0px;
}
#box2{
width:100px;
height:100px;
? ?background:blue;
position:absolute;
top:0px;
left:100px;
}
</style>
</head>
<body>
<div id="box1">box1
? <div id="box2">box2
? </div>
</div>
</body>
</html>
2017-03-02
CSS定位有三種基本定位：普通流、浮動、絕對定位。默認的是普通流定位，所以main沒設置定位就默認是普通流定位，是有定位的。所以right的絕對定位就是關于父元素main定位。body算是right的爺爺元素了哈哈。應該沒講錯吧。建議想了解比較詳細的知識去w3school查，然后編程練習來慕課網這邊，我是這樣學的，我蠻說你蠻看，哈哈