Блог

Главная - Вопросы по программированию - CSS получение точного местоположения тега div на разных размерах монитора

CSS получение точного местоположения тега div на разных размерах монитора

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать веб-сайт, и по мере его создания я тестирую его на двух мониторах: моем ноутбуке 1366 x 768 и подключенном к нему мониторе 1080p. Я пытаюсь выровнять тег div, чтобы он всегда оставался в одном и том же месте, и я использую это:

  nav{
    position:absolute;
    left: 40%;
    top: 60%
    }

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

Комментарии:

1. Что вы подразумеваете под «тем же самым местом»? По отношению к чему, к элементу-предку, к области просмотра браузера, к чему-то еще?

Ответ №1:

При использовании position:absolute; все фиксированные элементы будут основываться на <html> .

Это означает, что от него останется 40% от того монитора, который вы используете. Увеличьте ширину, и его положение изменится.

Чтобы исправить это, вам понадобится родительский контейнер с position: relative .

Теперь все position:absolute , что находится внутри родительского элемента with pos:rel , будет относиться к этому элементу, и родительский элемент по-прежнему будет следить за потоком документов.

Короче говоря:

  //html
<body>
   <element>
        <nav>
        </nav>
   </element>
</body>
//css
element {
     position:reletive;
 }
 nav{
     position:absolute;
     left: 40%;
     top: 60%
}

Ответ №2:

У вас div есть class = nav или id = nav ? В этом случае добавьте префикс nav в ваш css с . помощью в случае класса и # в случае идентификатора.

И если вы хотите, чтобы div находился точно в том же месте по отношению к верхней и левой части вашего браузера, переключитесь обратно на px

% будет зависеть от размера вашего браузера.

Ответ №3:

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

В этом случае вы захотите использовать

 nav{
  position:fixed;
  left: 40%;
  top:60%;
}

Это выводит элемент из обычных правил потока и перемещает его относительно области просмотра.

Я не знаю ни одного правила CSS, которое нацелено на положение окна относительно рабочего стола ОС.

Метки: