положение фиксированного div в абсолютном позиционировании div - но почему? - PullRequest
Новая
       62

положение фиксированного div в абсолютном позиционировании div - но почему?

0 голосов
/ 04 декабря 2018

Мне нужно зафиксировать положение элемента, но я не могу расположить его относительно окна просмотра, мне нужно, чтобы он был расположен относительно контейнера.

Мне удалось это сделать, но мне интереснокак и почему это работает, потому что на самом деле я думаю, что фиксированная позиция ВСЕГДА позиционируется относительно окна просмотра, а НЕ родительских элементов.

Здесь мой (рабочий) код: 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

body {
    height: 2000px;
}

.container {
    position: relative;
}

.sidebar {
    width: 200px;
    background-color: red;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 100px;
}

.fixed {
    width: 100px;
    height: 100px;
    background-color: green;
    position: fixed;
    /* top: 0;
    left: 0; */
    margin-left: 10px;
    margin-top: 10px;
}

</style>
</head>

<body>

<div class="container">
    <div class="sidebar">
        <div class="fixed"></div>
    </div>
</div>

</body>
</html>

Fiddle: https://jsfiddle.net/tnwLycao/

Элемент «фиксированный» можно легко позиционировать с полями (например, margin-left / margin-top).Однако, когда я деактивирую поля и пытаюсь расположить «фиксированный» с верхним / левым краем, он снова позиционируется относительно окна просмотра, а не относительно родительского контейнера / элемента.

Может кто-нибудь подсказать, как ипочему это работает?

1 Ответ

0 голосов
/ 04 декабря 2018

Элемент с position: fixed равен , действительно расположен относительно области просмотра (или браузера).Однако, поскольку это абсолютно позиционированный элемент, он «позиционируется относительно исходного содержащего блока , установленного в области просмотра».

Это изложено в position документация:

абсолютно позиционированный элемент - это элемент, вычисленное значение position которого равно absolute или fixed.Свойства top, right, bottom и left определяют смещения от краев элемента , содержащего элемент .(Содержащий блок является предком, относительно которого позиционируется элемент.) Если элемент имеет поля, они добавляются к смещению.

То есть, когда вы задаете margin-top иmargin-left, эти значения относятся к родительскому .И поскольку элемент расположен относительно родителя, значения по умолчанию top и left являются унаследованными от родителя.В вашем примере элемент .fixed имеет значение top, равное 100px, поскольку он наследует значение top 100px от .sidebar (родительский элемент).Когда вы устанавливаете top: 0 на .fixed, вы переопределяете это значение (переходя от top: 108px к top: 0):

Fixed

Из-за этого элемент, кажется, выведен из потока.Тем не менее, он по-прежнему всегда располагается относительно области просмотра;у него было только начальное смещение (которое он унаследовал от своего родителя).

...