Абсолютная позиция, может кто-нибудь это объяснить

Question

Вот фрагмент кода CSS, который мне нужно объяснить:

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

Хорошо, так что это абсолютное позиционирование изображения, очевидно.

1. верх - это как обивка сверху, верно?
2. что осталось 50%?
3. почему левое поле в -445px?

Обновление: ширина 860 пикселей Фактическое изображение 100x100, если это имеет значение ??

Answer 1

Это, вероятно, было сделано для того, чтобы центрировать элемент на странице (используя метод "мертвая точка" ).

Это работает следующим образом: если предположить, что элемент имеет ширину 890 пикселей, он установлен на position:absolute и left:50%, что помещает его левый край в центр браузер (ну, это может быть центр какого-то другого элемента с position:relative).

Затем используется отрицательное поле для перемещения левого края влево на расстояние, равное , равное половине ширины элемента , таким образом центрируя его.

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

Answer 2

1. Верх - это расстояние от вершины элемента html или, если оно находится внутри другого элемента с абсолютной позицией, от вершины этого элемента.

2. & 3. Это зависит от ширины изображения, но может использоваться для центрирования изображения по горизонтали (если ширина изображения составляет 890 пикселей). Однако есть и другие способы центрировать изображение по горизонтали. Чаще всего это используется для центрирования блока с известной высотой по вертикали (это самый простой способ центрировать блок с известной высотой по вертикали):

   top: 50%
   margin-top: -(height/2)px;
   

Answer 3

Приведенный выше фрагмент относится к элементу (может быть div, span, image или иным образом) с идентификатором section.

Элемент имеет фоновое изображение blah.png, которое будет повторяться в направлениях x и y.

Верхний край элемента будет расположен в 0px (или любых других единицах) от вершины его родительского элемента, если родительский элемент также абсолютно позиционирован. Если родитель является окном, оно будет в верхнем крае окна браузера.

Левый край элемента будет расположен на 50% левее левого края родительского элемента.

Затем элемент будет «перемещен» на 445 пикселей влево от этой 50% -ной точки.

Answer 4

верх - это как обивка сверху справа?

Да, вверху страницы.

что делают оставшиеся 50%?

Перемещает содержимое в центр экрана (100% будет справа).

почему левое поле в -445px?

После перемещения его влево: 50%, он перемещается на 445 пикселей влево.

Answer 5

Все, что вам нужно знать, вы узнаете, прочитав модель CSS box

Answer 6

С риском звучать как Капитан Очевидность, я постараюсь объяснить это как можно проще.

Верх - это число, которое определяет количество пикселей, от которого вы хотите, чтобы оно было ОТ верхней части любого HTML-элемента над ним ... так что это не обязательно верх вашей страницы. Будьте осторожны с форматированием HTML при разработке CSS.

Ваши 50% слева должны переместить его в центр экрана, учитывая, что он равен 50. Имейте в виду, что люди имеют разные размеры экрана и располагаются в (0,0) верхнем левом углу вашего изображения, а не в центре изображения, поэтому оно не будет идеально распределено по центру экрана, как вы ожидаете.

Именно поэтому используется поле слева до -445 пикселей - чтобы переместить его дальше, исправлено.

Удачи, я надеюсь, что это имело смысл. Я пытался сформулировать свое объяснение по-другому, на случай, если другие ответы все еще доставляют вам трудности. Это были отличные ответы.

(Если у вас два монитора разных размеров, я советую поиграть с кодом, чтобы увидеть, как каждая модификация влияет на экраны разных размеров!)

Answer 7

Когда позиция абсолютная, top - это вертикальное расстояние от родителя (возможно, тег body, поэтому 0 - верхний край окна браузера). Слева 50% - это расстояние от левого края. Отрицательное поле сдвигает его влево на 445 пикселей. Что касается того, почему, ваше предположение так же хорошо, как и мое.