объясните это css-поведение абсолютной позиции

я хочу знать, нормально ли такое поведение в css и почему? мой вопрос о позиции: absolute; у меня есть два div, первый из них содержит изображение, когда он расположен в абсолютном положении с 0 внизу и справа 0, он вставляется в конец страницы (но не в конец реальной страницы, а в конец отображаемого вида страницы) примечание что у него нет родителя с абсолютным, фиксированным или относительным положением

демонстрация JSbin

изображение к результату это полный код

<!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>

если бы я не мог правильно объяснить свой вопрос из-за языковых ограничений, я бы хотел, чтобы это сделал фрагмент кода.


html layout css css-position
person user4833581    schedule 10.04.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Это нормальное поведение именно потому, что у вас нет position:relative ни в одном из родителей, поэтому css использует высоту области просмотра в качестве ссылки.

Если вы добавите body { position:relative}, он будет относиться к телу и, таким образом, будет внизу страницы.

Если вы добавите .content { position:relative}, он будет внизу синего поля содержимого.

person Miro    schedule 10.04.2016
comment
да, спасибо за ваше заявление. это один из моих ага-моментов, связанных с css, так как я представлял, что такое поведение будет происходить по умолчанию, поскольку они должны взаимодействовать со страницей напрямую, а не с окном просмотра. - person user4833581; 10.04.2016
comment
Да, position:relative для меня тоже был ага-момент. Я с вами — в css так много нелогичного. - person Miro; 10.04.2016