2

Привет.

Почему блок по середине выравнивается при абсолютном позиционировании? введите сюда описание изображения

Я не понимаю логику происходящего.

  1. У меня есть блок. задаю ему position:absolute.

  2. Свойство direction:ltr (слева направо) по умолчанию, поэтому блок смещается относительно левой стороны хтмл-элемента на 0 пикселей, потом задается ширина 300 пикселей, а right:0 просто игнорируется - так разрешается КОНФЛИКТ задания left:0px, right:0px и width:300px. С вертикалью аналогично, только по умолчанию приоритет задания - сверху вниз.

  3. Получаю, что левый верхний угол фиолетового блока стоит в точке (0,0) пикселей у хтмл-элемента.

  4. Теперь насчет margin:auto. Почему выравнивается по середине по высоте - не понимаю. В стандарте https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align написано 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

То есть, марджины сверху и снизу становятся нулями при задании авто.


Только что нашел в стандарте CSS про задание вертикальных margin для абсолютно позиционированных элементов. Если элемент в нормальном потоке или плавает, то установленные в авто вертикальные margin обнуляются (10.6.2). Если же элемент позиционирован абсолютно, а у элемента заданы вертикальные margin в авто, то обнуления НЕ происходит - эти margin делаются равными друг другу (10.6.4.)

Пункт 10.6.4. Абсолютно позиционированные, незаменяемые элементы. стандарта CSS - 4. Если в этой точке оба 'margin-top' и 'margin-bottom' – все еще 'auto', то решите уравнение при жестком условии, что два поля должны быть РАВНЫ.

2
  • margin тоже входит в состав блока. Вы определили его по краям и сделали равный отступ
    – Yuri
    10 янв 2017 в 20:02
  • Вы ж сами поставили margin: auto; и задали top,bottom,left,right
    – goodalien
    11 янв 2017 в 10:45

1 ответ 1

1

Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

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

2
  • 1
    классный четкий ответ. спасибо)
    – Dimon
    11 янв 2017 в 0:20
  • пункт 10.6.4. Абсолютно позиционированные, незаменяемые элементы. стандарта CSS - 4. Если в этой точке оба 'margin-top' и 'margin-bottom' – все еще 'auto', то решите уравнение при жестком условии, что два поля должны быть РАВНЫ.
    – Dimon
    11 янв 2017 в 10:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.