解释这个绝对位置的css行为答案

【问题标题】：explain this css behavior of absolute position解释这个绝对位置的css行为
【发布时间】：2016-07-31 04:39:55
【问题描述】：

我想知道 css 中的这种行为是否正常，为什么？我的问题是关于 position: absolute; 我有两个 div，其中第一个包含图像，当它定位在绝对位置时，0 底部和右侧 0 它粘在页面的末尾（但不是真实页面的末尾，而是页面显示视图的末尾）请注意，它没有任何具有绝对或固定或相对位置的父级

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>

如果由于语言限制我无法以正确的方式解释我的问题，我希望代码 sn-p 能做到。

【问题讨论】：

标签： html css layout css-position

【解决方案1】：

这是正常行为，正是因为您在任何父母中都没有任何position:relative，因此 css 使用视口高度作为参考。

如果您添加body { position:relative}，它将相对于正文，因此位于页面底部。

如果您添加.content { position:relative}，它将位于蓝色内容框的底部。

【讨论】：

是的，谢谢你的声明。这是我与 css 相关的“啊哈时刻”之一，因为我想象默认情况下会发生这种行为，因为它们应该与页面直接交互而不是视口
是的，position:relative 对我来说也是一个“惊喜时刻”。我支持你 - 关于 css 有很多违反直觉的事情。