position:absolute到底是相对于body定位还是屏幕啊
这是 定位到了浏览器的底部了啊,拖动滚动条,它又上去了,如下图
没有父容器不是说相对于<body>定位 吗,上几节讲的,<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>
慕粉3442477浏览 5401回答 6
6回答
-
Cassie_yu
absolute 定位a.无已定位祖先元素，以<html>为基准偏移b.有已定位祖先元素，以距其最近的、已定位的祖先元素为基准偏移位置会随滚动条变化 -
汉娜之眼
说白了，如果父级元素有定位属性，就会相对于父级元素定位 -
133210
没毛病啊 你设置的绝对定位是 bottom：0；他就定位在容器底部了 你改成top试试 还有根据浏览器浮动的那个定位是fixed，我都忘差不多了哈哈 -
133210
你说的应该是相对body定位，而想要设置相对父元素，要给父元素先设置position:relative;定位。 -
一杯2块的奶茶
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;图我就不截了，楼主自己看吧。
随时随地看视频慕课网APP
Html/CSS