почему ДИВ с: после того, как дает горизонтальной прокрутки для родительского элемента

Question

меня такая ситуация http://jsfiddle.net/m_aleksandrova/9THdb/

div.with-после того, как имеет: после псевдо-элемента (который течет справа). Для своего родителя (div.container) требуется вертикальная прокрутка.

<div class="container"> 
    <div class="with-after"></div> 
</div> 

Вопрос в том, почему: после чего происходит горизонтальная прокрутка? Я подумал, что если после того, как он абсолютно позиционирован, он больше не в потоке.

Можно ли сделать: после того, как элемент протекает под вертикальной прокруткой и идет дальше вправо?

Answer 1

Для получения идеального вариантного 3, вы должны сделать следующие изменения в класс с-после.

Адрес Fiddle.

Изменения в CSS:

.with-after { 
    border: 1px solid green; 
    height: 50px; 
    padding: 0 93px; 
    position: absolute; 
    right: 480px; 
    z-index: -1; 
} 

Вы должны сделать основной класс т.е. в вашем случае обоюдного после иметь позицию абсолютного. Это приведет к удалению потока, а при z-индексировании оно будет лежать под вертикальной прокруткой. Надеюсь это поможет.

ЛОГИКА:

Как я уже говорил ранее, Вы не можете обмануть CSS, сделав положение: по отношению к основному классу и постион: абсолютный для псевдо-элемента одного и того же класса. Поэтому для того, чтобы добиться эффекта создания div под вертикальной прокруткой, вы должны определить позицию: абсолютную для класса, который должен идти под родительским элементом. Таким образом, определение psudo того же класса с другой позицией не принесет пользы браузеру, чтобы узнать, что вы хотите, и будете вести себя странно, взяв комбинацию как псевдо, так и фактического класса элемента, поэтому сделать его прозрачным для браузер, чтобы знать, что вы хотите, объявите основной класс after-after как позицию: абсолютную и просто сделайте простой для браузера, чтобы он знал, что он должен идти под родительским элементом с отрицательным z-индексом. Надеюсь, это поможет сейчас.

Answer 2

Помогает ли вам что-то подобное? http://jsfiddle.net/David_Knowles/3arca/

.my-position-base {position: relative;} 

Добавление этой оболочки дает контекст для сумасшедшего абсолютного позиционирования, необходимого для достижения того, что вы ищете.