как разместить div для всех разрешений экрана

Question

Мне нужно разместить div в определенной части моей веб-страницы.поэтому я написал следующее:

<div style='position:absolute;top:500px;margin-left:300px;width:100px;border:1px solid #000000;height:100px;'></div>  

Когда я проверил эту страницу на 19-дюймовом мониторе, она оказалась там, где я хотел.но я проверил ту же страницу в 17-дюймовом мониторе, он расположен на 50-70 пикселей больше на левой стороне.

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

Answer 1

Изначально у div не было родительских элементов, поэтому он находится непосредственно под элементом body. поэтому, когда я попытался установить left: 100px, он считается от самой левой части в браузере.

Но у меня уже был div с 900px с некоторым содержимым, и половина пространства (по вертикали) в этом div была пустой. это где я хотел разместить 100px div.

Итак, я установил положение 900px относительно и перевел 100px в деление 900px. теперь этот div позиционируется как «абсолютный» для родительского элемента.

Теперь, если я установил left: 100px к div, он считается от его родительского элемента, который расположен относительно.

Концепция проста,

Абсолютное позиционирование работает с использованием следующего доступного родительского контейнера, который позиционируется (абсолютно или относительно)

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

Answer 2

Может быть, вы хотите absolute position div horizontally center, затем напишите так: CSS:

div{
  position:absolute;
  top:500px;
  margin-left:-50px;
  left:50%;
  width:100px;
  border:1px solid #000000;
  height:100px;
}

, и вы можете использовать media query для другого разрешения, отметьте http://css -tricks.com / 6206-разрешение конкретных-таблиц стилей /