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

StackOverflow https://stackoverflow.com/questions/97683

  •  01-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

Это было полезно?

Решение

  1. Top - это расстояние от верха html-элемента или, если он находится внутри другого элемента с абсолютным положением, от верха этого элемента.

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

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

Другие советы

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

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

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

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

top - это как дополнение в правом верхнем углу?

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

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

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

почему левое поле - 445 пикселей?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top