Абсолютная позиция, может кто-нибудь это объяснить
Вот фрагмент CSS, который мне нужно объяснить:
#section {
width: 860px;
background: url(/blah.png);
position: absolute;
top: 0;
left: 50%;
margin-left: -445px;
}
Хорошо, очевидно, это абсолютное позиционирование изображения.
- верх - это как обивка сверху, верно?
- что делают оставшиеся 50%?
- почему у левого поля -445 пикселей?
Обновлять: ширина 860 пикселей. Фактическое изображение 100x100, если это имеет значение ??
Ответы 7
Когда позиция абсолютна, верх - это вертикальное расстояние от родителя (возможно, тег body, поэтому 0 - это верхний край окна браузера). Left 50% - это расстояние от левого края. Отрицательное поле перемещает его влево на 445 пикселей. Что касается того, почему, ваше предположение так же хорошо, как и мое.
top is like padding from the top right?
Да, вверху страницы.
what does left 50% do?
Он перемещает контент в центр экрана (100% будет полностью вправо).
why is the left margin at -445px?
После перемещения с помощью «left: 50%» он перемещается на 445 пикселей влево.
Вы узнаете все, что вам нужно знать, прочитав Модель коробки CSS
Верх - это расстояние от верха элемента html или, если он находится внутри другого элемента с абсолютной позицией, от его верха.
& 3. Это зависит от ширины изображения, но может быть для центрирования изображения по горизонтали (если ширина изображения 890 пикселей). Однако есть и другие способы центрировать изображение по горизонтали. Чаще всего это используется для центрирования блока известной высоты по вертикали (это самый простой способ центрировать что-либо известной высоты по вертикали):
top: 50% margin-top: -(height/2)px;
Вероятно, это было сделано для центрирования элемента на странице (с использованием техники "мертвая точка").
Это работает следующим образом: если элемент имеет ширину 890 пикселей, он установлен на position:absolute и left:50%, что помещает его левый край в центр браузера (ну, это может быть центр какого-то другого элемента с position:relative).
Затем используется отрицательный запас, чтобы переместите левый край находился слева на расстоянии, равном половина ширины элемента, таким образом центрируя его.
конечно, это может не центрировать его точно (это зависит от того, насколько широк элемент на самом деле, в вставленном вами коде нет width, поэтому невозможно быть уверенным), но он, безусловно, размещает элемент по отношению к центру страницы
Приведенный выше фрагмент относится к элементу (может быть div, span, image или иначе) с идентификатором section.
Элемент имеет фоновое изображение blah.png, которое будет повторяться в направлениях x и y.
Верхний край элемента будет расположен на 0 пикселей (или любых других единиц) от верха его родительского элемента, если родительский элемент также расположен абсолютно. Если родителем является окно, оно будет в верхнем углу окна браузера.
Левый край элемента будет располагаться на 50% слева от левого края родительского элемента.
Затем элемент будет «перемещен» на 445 пикселей влево от этой точки 50%.
Рискуя показаться Капитаном Очевидным, я постараюсь объяснить это как можно проще.
Top - это число, которое определяет количество пикселей, которое вы хотите, чтобы оно было ОТ верха любого элемента html, находящегося над ним ... так что не обязательно вверху вашей страницы. Будьте осторожны с форматированием HTML при разработке CSS.
Ваш левый 50% должен переместить его в центр экрана, учитывая, что это 50. Имейте в виду, что люди имеют разные размеры экрана и размещаются в (0,0) верхнем левом углу вашего изображения, а не в центре изображения. , поэтому он не будет идеально размещен в центре экрана, как вы могли бы ожидать.
ПОТОМУ, почему используется маржа слева до -445 пикселей - чтобы переместить его дальше, исправлено.
Удачи, надеюсь, это имело смысл. Я пытался сформулировать свое объяснение по-другому, на тот случай, если другие ответы все еще доставляли вам трудности. Это тоже были отличные ответы.
(Если у вас два монитора разного размера, я предлагаю поиграть с кодом, чтобы увидеть, как каждая модификация влияет на экраны разного размера!)