Предотвратить перемещение поля или заполнения внешних элементов относительно абсолютного элемента в фиксированной позици ⇐ CSS

[Anonymous]

Я читал вопросы об абсолютном позиционировании таких элементов. Я предполагаю, что использование функции преобразования — это способ сделать элемент статическим внутри родителя. Я сделал этот CSS:

#container { ширина: 25%; соотношение сторон: 1; цвет фона: фиолетовый; } #элемент { позиция: абсолютная; ширина: 2%; соотношение сторон: 1; цвет фона: фиолетовый; трансформировать:перевести(1151,5%, 0%); } С помощью HTML:

Проблема в том, что это работает нормально только тогда, когда я использую:

* { маржа: 0; заполнение: 0; } чтобы внешние элементы, такие как тело или HTML, не применяли свои поля. Без нулевого поля/заполнения позиция абсолютного элемента изменяется при изменении размера окна.

Например, изменение полей тела также меняет положение дочернего элемента.

Мой вопрос: как мне создать контейнер с абсолютно позиционированным дочерним элементом, который будет сохранять свое точное положение даже при изменении размера окна или даже при изменении поля? Таким образом, контейнер является независимым, а на дочерний элемент внутри влияет только изменение размера контейнера. Например, наличие независимого мира внутри контейнера, который масштабируется вместе со своими дочерними элементами, сохраняя свои позиции, например изображения с различными объектами или что-то в этом роде.

Поиграйте здесь.