我想知道 css 中的这种行为是否正常，为什么？ 我的问题是关于 position: absolute; 我有两个 div，第一个包含图像，当它定位在绝对位置时，底部为 0，右边为 0，它粘在页面的末尾(但不是实际页面的末尾，而是页面显示 View 的末尾) 请注意，它没有任何父级具有绝对或固定或相对位置
JSbin Demo
这是一个完整的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background: #808080;
/*height:1200px;*/
}
.content {
background: rgba(0, 148, 255, 0.69);
/*min-height:400px;*/
width: 900px;
margin: 0 auto;
border: 6px groove #00ff90;
}
h1 {
position: relative;
top: 5px;
right: 5px;
}
p {
/*position: relative;*/
/*top: 150px;*/
/*right: 5px;*/
}
img {
border: 3px groove #0ff;
width: 400px;
position: absolute;
/*top:0px;
right:0px;*/
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="content">
<h1>why we should using reletive posittios</h1>
<p>
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
</p>
<p>you can move any element and did't brak the stucture , it has many advantages and disadvantages too !!</p>
<img src="pet.jpg" alt="Alternate Text" />
</div>
<div>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</div>
</body>
</html>
如果由于语言限制我无法以正确的方式解释我的问题，我希望代码片段可以。
最佳答案
这正是正常行为，因为您在任何父级中都没有任何 position:relative，因此 css 使用视口(viewport)高度作为引用。
如果您添加 body { position:relative} 它将相对于主体，因此位于页面底部。
如果您添加 .content { position:relative} 它将位于蓝色内容框的底部。
关于html - 解释这种绝对位置的CSS行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36524625/