Позиция CSS: проблема с абсолютным разрешением экрана

Код CSS:

top:45;
left:98;
float:right;
position:absolute;z-index:2;

Я выполнил вышеуказанное кодирование для плавающего div, когда я работал с разрешением 1024, но когда я тестировал то же самое с другим разрешением, это не выравнивалось.

Как мы можем это исправить?

Ответ 1

Абсолютно позиционированные элементы расположены в соответствии с относительно позиционированным предком или окном. Это звучит, как в вашем случае, оно позиционируется в окне.

Способ исправления заключается в том, чтобы помещать ваш абсолютно расположенный <div> внутри относительного контейнера. Таким образом, когда окно изменяет размер, оно останется в правильном месте:

<div style="position: relative">
    <div style="position: absolute; left: 98px; top: 45px;">
         This div will always be 98px from the left and 45px from the top of its parent .
    </div>
</div>

Ответ 2

Ни одно из вышеперечисленных решений не работает для меня... держите его в абсолютном положении и дайте margin-top, margin-left... в % age;

margin-top:10%;
margin-left:5%;

который будет автоматически настроить w.r.t. разрешение экрана...

это сработало идеально для меня. протестированы на разных разрешениях.

весело!

Ответ 3

Вместо пикселя используйте %. Это может помочь вам произвести вывод.

Ответ 4

Предполагая, что элемент не содержится в другом элементе с положением относительного, элемент, который вы позиционируете, должен находиться в одном и том же положении независимо от разрешения.

Убедитесь, что вы используете:

top: 45px
left: 98px

Вы оставили объявление пикселя в своем коде выше.

Кроме того, float: справа не требуется на позиционированном элементе, поскольку позиция: абсолютная вытесняет его из нормального потока документа.