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

Question

Код CSS:

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

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

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

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

Answer 2

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

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

, которое автоматически регулирует разрешение экрана ...

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

веселись!

Answer 3

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

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

top: 45px
left: 98px

Вы оставили в приведенном выше коде декларацию пикселей.

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

Answer 4

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