Влияние статичного блока на абсолютно позиционированные псевдоэлементы

[Sigizmund]

Прежде всего здравствуйте. Ранее заходил на сайт только как в справочник, но настала пора зарегистрироваться на форуме, т. к. он несёт разумное, доброе, вечное. Я считал себя неплохим верстальщиком( ох, гордыня... ) сделав несколько шаблонов для Wordpress и Opencart, но вчитавшись внимательно в раздел про CSS3 да и просто в справочник понял, что являюсь нубасом зелёным, ведь понятия не имею, что есть правила nth-child, border-radius, transform, count, @keyframes, функция calc() и многие другие. Занялся ликбезом всерьёз и постепенно дошёл до раздела "Практикум". Решая задачу http://htmlbook.ru/practical/indikator-vypolneniya столкнулся с интересной фичей(или багом) абсолютно позиционированных элементов. Сначала сделал так: http://jsfiddle.net/Sigizmundf/jynfdawx/ Я всегда считал, что  элементы с position: static; не влияют на абсолютно позиционированные, но получается, что .prog влияет на расположение wrapper:after, у которого position: absolute; Сделал по-другому http://jsfiddle.net/Sigizmundf/9t4p9gbr/ и всё заработало. Кто-нибуть прокомментируйте, почему так произошло?

[Great Rash]

В первом случае вы не указали смещение для элемента :after, поэтому он отобразился в том месте где его верхний левый угол был бы если бы у него стояло свойство position: static;. Чтобы заработал ваш пример, достаточно явно указать расположение элемента (14 строка).

[Sigizmund]

В первом случае вы не указали смещение для элемента :after, поэтому он отобразился в том месте где его верхний левый угол был бы если бы у него стояло свойство position: static;. Чтобы заработал ваш пример, достаточно явно указать расположение элемента (14 строка).

Странно, я думал, что элемент с position: absolute; автоматически встаёт в левый верхний угол первого нестатичного родителя(fixed, relative, absolute), а значениями top, bottom, left и right мы его двигаем куда надо с этой точки. По этой логике при right:2px; элемент уезжает в правый верхний угол родителя с отступом справа 2рх, но теперь очевидно, что это не так. Такое поведение никак не связано с тем, что :after изначально строчный элемент?

[zenw]

 

Такое поведение никак не связано с тем, что :after изначально строчный элемент?

 

Не связано, поскольку элементы с position: absolute автоматически становятся блочными.

[Great Rash]

Странно, я думал, что элемент с position: absolute; автоматически встаёт в левый верхний угол первого нестатичного родителя

Нет это не так. Элемент, которому назначили position: absolute; просто выпадает из потока, но если ему не назначить смещение (top, left), то он останется там где был.

[sigma77]

Странно, я думал, что элемент с position: absolute; автоматически встаёт в левый верхний угол первого нестатичного родителя(fixed, relative, absolute), а значениями top, bottom, left и right мы его двигаем куда надо с этой точки. По этой логике при right:2px; элемент уезжает в правый верхний угол родителя с отступом справа 2рх, но теперь очевидно, что это не так. Такое поведение никак не связано с тем, что :after изначально строчный элемент?

Изначально элемент с position: absolute; имеет значения: top: auto; left: auto; right: auto; bottom: auto;

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

При задании позиционирования положение считается от точки отсчета, которая может иметь различные нюансы. Подробнее лучше смотреть спецификацию, ну или книжку Мейера почитать.

[Sigizmund]

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

[Great Rash]

Это тоже стандартное поведение.