Question

我想知道css中的这种行为是否正常，为什么？我的问题是关于立场：绝对; 我有两个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>

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

Answer 1

这是正常的行为，正是因为你在任何父母中都没有GPG_AGENT_INFO所以css使用视口高度作为参考。

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

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

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

JSbin Demo

1 个答案: