這是 定位到了瀏覽器的底部了啊,拖動滾動條,它又上去了,如下圖沒有父容器不是說相對于<body>定位 嗎,上幾節(jié)講的,<body>的最底部不是在最后一個<p>標簽后面嗎?講義原話是這樣的...下面是代碼
<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>relative樣式</title>
<style?type="text/css">
#div1{
????width:200px;
????height:200px;
border:2px?red?solid;
position:absolute;
????bottom:0;
????right:0;
????
????
}
</style>
</head>
<body>
<div?id="div1"></div>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
????<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
</html>
6 回答
Cassie_yu
TA貢獻22條經(jīng)驗 獲得超15個贊
absolute 定位
a.無已定位祖先元素，以<html>為基準偏移
b.有已定位祖先元素，以距其最近的、已定位的祖先元素為基準偏移
位置會隨滾動條變化
133210
TA貢獻15條經(jīng)驗 獲得超6個贊
沒毛病啊 你設置的絕對定位是 bottom：0；他就定位在容器底部了 你改成top試試?
還有根據(jù)瀏覽器浮動的那個定位是fixed，我都忘差不多了哈哈
一杯2塊的奶茶
TA貢獻226條經(jīng)驗 獲得超75個贊
position:absolute 元素相對最近的 position 為 absolute / relative / fixed 的祖先元素（包含塊）定位，如果沒有這樣的祖先元素，則以初始包含塊進行定位，而初始包含塊并不是以<html>或<body>進行定位的。
我們可以做一下測試：
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>position:absolute</title>
</head>
<style?type="text/css">
html?{
????border:?1px?solid?red;
????background-color:?#ee8;
}
body?{
????width:?300px;
????height:?200px;
????margin:?10px?auto;
????background-color:?#ccc;
????border:?1px?solid?blue;
}
div?{
????width:?100px;
????height:?100px;
????background-color:?#3ff;
????position:?absolute;
}
</style>
<body>
body
<div>div</div>
</body>
</html>body添加position:relative;div添加 bottom:0;
html添加position:relative;div添加 bottom:0;
body和html都不進行定位，div設置bottom:0;
圖我就不截了，樓主自己看吧。
添加回答
舉報
0/150
提交
取消