Позиционирование: стиль и вычисляемый стиль имеют разные значения

Question

Первый пост на этой платформе:)

У меня сейчас проблема с позиционированием в процентах. Стиль и вычисляемый стиль показывают другое значение для свойства top моего элемента:

• значение, которое я вижу в вычисляемом стиле, указывается в пикселях, а не в%, как определено в таблице стилей
• значение отличается: если я заменю стиль на вычисленный стиль, элемент сместится вниз примерно на 40 пикселей.

Вот мой код:

<div id="container">
    <img id="img1" />
    <img id="img2" />
</div>

#container { position:relative; display:inline-block;}
#img1 { position:relative; }
#img2 { position:absolute; top:40% }

img1 имеет высоту 600 пикселей. Поскольку он имеет относительное расположение, container получает свой рост. Так container имеет высоту 600 пикселей. Если я сделаю математику, верхняя позиция #img2 в пикселях должна быть 240px. Но компьютерный стиль дает мне 280px. Зачем?

Это происходит почти со всеми детьми в моем контейнере, и это сводит меня с ума!

У кого-нибудь есть представление о том, что происходит?

Answer 1

От MDN:

getComputedStyle () предоставляет окончательные значения, используемые всеми свойствами CSS элемента.

Вычисленные значения стиля всегда будут абсолютными значениями, так как они представляют состояние данного элемента после того, как браузер завершит применение CSS.

• https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle
• https://developer.mozilla.org/en-US/docs/Web/CSS/used_value

---

редактировать

Теперь, когда вы предоставили код, я могу ответить на ваш конкретный вопрос.

Задавать display: block на #container и ваши изображения.

Вычисленное значение относится к содержащемуся документу, а не к непосредственному родителю элемента. Если вы делаете снимок экрана и измеряете расстояние от верхней части #container до вершины #img2 Вы должны увидеть, что это правильно 240px. Тем не менее, вычисленное значение top за #img2 не обязательно будет 240px.

Вот демо. Синий прямоугольник абсолютно расположен на top: 40%; который правильно отображает 240px в своем контейнере 600px, но если вы посмотрите на вычисленное значение для top он сообщит о другом значении, потому что это относительно вершины области просмотра, у которой есть поля, установленные на теле.