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

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

Answer 3

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

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

top: 45px 
left: 98px 

Вы оставили декларацию пикселя от вашего кода выше.

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

Answer 4

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

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

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

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

весело провести время!