Вопрос по абсолютному позиционированию

[Igor Schnaider]

http://codepen.io/anon/pen/LpgeVq?editors=110

Проблема в следующем. Первый абсолютно спозиционированный относительно body элемент располагается чуть ниже верха страницы. (Должен примыкать прямо к верху: top: 0 стоит.) Почему верхнее поле заголовка (body > h1) так влияет на него именно в body?

Но этого не происходит в простом wrapper'е.

[Mozzie]

У тебя в body стоит position: relative;

[Igor Schnaider]

У тебя в body стоит position: relative;

Вопрос не в этом. Почему так происходит? Сам body начинается с верхнего левого края. Значит position: absolute + top: 0 должен тоже примыкать элемент к верху.

[Нарек]

Сам body начинается с верхнего левого края

Неправда. body ушел ниже от отступа h1. 

[Igor Schnaider]

 

Сам body начинается с верхнего левого края

Неправда. body ушел ниже от отступа h1. 

 

Точно.

Только почему тогда фон до самого верхнего края вьюпорта? Должен же, по идее, тоже чуть ниже начинаться.

[Igor Schnaider]

 

 

Сам body начинается с верхнего левого края

Неправда. body ушел ниже от отступа h1. 

 

Точно.

Только почему тогда фон до самого верхнего края вьюпорта? Должен же, по идее, тоже чуть ниже начинаться.

 

Ага, вот оно: http://www.w3.org/TR/CSS2/colors.html#background

Оказалось, это html подкрасился тоже. Вот это я не знал. Теперь все встало на свои места.

Спасибо за комментарии.

[hypnocolor]

Почитайте про схлопывание отступов (http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/). В вашем случае отступ первого h1 создал отступ в body. В результате абсолютно спозиционированный блок примкнул не к самому верху, а к границе этого отступа. Физически с body ничего не случилось. Во втором блоке, который .wrapper, отступ у h1 вывалился за пределы .wrapper, но внутренних отступов он не создал, поэтому абсолютно спозиционированный блок примкнул к самому верху. Надеюсь, понятно объяснил)

[Igor Schnaider]

Почитайте про схлопывание отступов (http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/). В вашем случае отступ первого h1 создал отступ в body. В результате абсолютно спозиционированный блок примкнул не к самому верху, а к границе этого отступа. Физически с body ничего не случилось. Во втором блоке, который .wrapper, отступ у h1 вывалился за пределы .wrapper, но внутренних отступов он не создал, поэтому абсолютно спозиционированный блок примкнул к самому верху. Надеюсь, понятно объяснил)

Не, вопрос про другое был, не про margin collapsing.

У меня путаница была именно из-за фона. Думал, раз фон до верха доходит, значит там и есть верх body. Потому что фон в margin не попадает. А оказалось, что по спецификации корневой элемент должен копировать свойство background элемента body. Поэтому не увидел этого отступа.

p.s. если :root { background: #fff; }, видно будет :-)

Edited November 8, 2015 by Igor Schnaider

[Нарек]

Хорошо все таки когда человек задает вопрос и не сидит ждет когда ему дадут код который можно скопировать и вставить, а ищет еще и сам)

Но тема действительно интересная, давайте обсуждать)

Например в IE11 все показывается как надо, без отступов.

Если поставить для body хотя бы 1px padding то опять же все работает в связке с overflow:hidden;. Получается это баг движка (IE или остальные?), или это недоработка самой спецификации? Что делает padding, что с помощью него все встает на свои места? 

Edited November 8, 2015 by Нарек

[Mozzie]

Хорошо все таки когда человек задает вопрос и не сидит ждет когда ему дадут код который можно скопировать и вставить, а ищет еще и сам)

Но тема действительно интересная, давайте обсуждать)

Например в IE11 все показывается как надо, без отступов.

Если поставить для body хотя бы 1px padding то опять же все работает в связке с overflow:hidden;. Получается это баг движка (IE или остальные?), или это недоработка самой спецификации? Что делает padding, что с помощью него все встает на свои места? 

Я не разу не видел что бы к body применялся relative, блок абсолют себе придумал из-за этого отступы так как он понимает что у родителя в голове бобо что тут обсуждать вообще )) Помести в absolute h1 и он поймет что ему нужно уже самому отталкиваться от заданых правил. Он не понимает как это так body relative, который может быть где-то в невесомости. Укажите ему параметры left, top и вы поймёте что там всё нормально. И тут еще одна вещь присутствует, в любой не понятной ситуации браузер не может выдать ошибку и ему нужно импровизировать с любыми глупостями верстальщика что бы всё работало.

Edited November 8, 2015 by Mozzie

[Нарек]

Я не разу не видел что бы к body применялся relative

А я видел.

Начиная вот отсюда

блок абсолют себе придумал из-за этого отступы так как он понимает что у родителя в голове бобо что тут обсуждать вообще )) Помести в absolute h1 и он поймет что ему нужно уже самому отталкиваться от заданых правил. Он не понимает как это так body relative, который может быть где-то в невесомости. Укажите ему параметры left, top и вы поймёте что там всё нормально. И тут еще одна вещь присутствует, в любой не понятной ситуации браузер не может выдать ошибку и ему нужно импровизировать с любыми глупостями верстальщика что бы всё работало.

 

ничего не понял. Но все таки вопрос не об этом, суть вопроса описана выше.

[Igor Schnaider]

Хорошо все таки когда человек задает вопрос и не сидит ждет когда ему дадут код который можно скопировать и вставить, а ищет еще и сам)

Но тема действительно интересная, давайте обсуждать)

Например в IE11 все показывается как надо, без отступов.

Если поставить для body хотя бы 1px padding то опять же все работает в связке с overflow:hidden;. Получается это баг движка (IE или остальные?), или это недоработка самой спецификации? Что делает padding, что с помощью него все встает на свои места? 

Нет. Вот здесь как раз все правильно. Это к вопросу про коллапс марджинов.

Суть в том, что если у родителя стоят padding или border (не none), тогда поле не будет выходить за родителя.

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

Просто в случае с body элемент на самом верху, поэтому создается такой эффект. Фактически заголовок съезжает вниз, но при этом сам body возвращается на освободившееся место.

 

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

 

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

Edited November 9, 2015 by Igor Schnaider

[Igor Schnaider]

Я не разу не видел что бы к body применялся relative

Например, такой случай http://codepen.io/anon/pen/MaPBLm?editors=110

Если убрать у body правило position: relative, тогда абсолютно позиционированный блок будет исходить из размеров вьюпорта.

Даже если ему (тому, который абсолютно спозиционирован) height: 100% явно задать (вот тут я еще не понял, почему так происходит).

Edited November 9, 2015 by Igor Schnaider