這是 定位到了瀏覽器的底部了啊,拖動(dòng)滾動(dòng)條,它又上去了,如下圖沒(méi)有父容器不是說(shuō)相對(duì)于<body>定位 嗎,上幾節(jié)講的,<body>的最底部不是在最后一個(gè)<p>標(biāo)簽后面嗎?講義原話是這樣的...下面是代碼
<!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貢獻(xiàn)22條經(jīng)驗(yàn) 獲得超15個(gè)贊
absolute 定位
a.無(wú)已定位祖先元素，以<html>為基準(zhǔn)偏移
b.有已定位祖先元素，以距其最近的、已定位的祖先元素為基準(zhǔn)偏移
位置會(huì)隨滾動(dòng)條變化
133210
TA貢獻(xiàn)15條經(jīng)驗(yàn) 獲得超6個(gè)贊
沒(méi)毛病啊 你設(shè)置的絕對(duì)定位是 bottom：0；他就定位在容器底部了 你改成top試試?
還有根據(jù)瀏覽器浮動(dòng)的那個(gè)定位是fixed，我都忘差不多了哈哈
一杯2塊的奶茶
TA貢獻(xiàn)226條經(jīng)驗(yàn) 獲得超75個(gè)贊
position:absolute 元素相對(duì)最近的 position 為 absolute / relative / fixed 的祖先元素（包含塊）定位，如果沒(méi)有這樣的祖先元素，則以初始包含塊進(jìn)行定位，而初始包含塊并不是以<html>或<body>進(jìn)行定位的。
我們可以做一下測(cè)試：
<!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都不進(jìn)行定位，div設(shè)置bottom:0;
圖我就不截了，樓主自己看吧。
添加回答
舉報(bào)
0/150
提交
取消