Абсолютное позиционирование и переполнение-х

Question

Разметка следующая:

<div class="mask">
    <div id="content-1" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div id="content-2" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div> 
</div>

и это CSS

.mask{
    position:absolute;
    width:300px;
    height:300px;
    overflow-x:hidden;
}
.content-item{
    position:absolute;
    width:300px;
}
#content-1{
    left:10px;
}
#content-2{
    left:305px;
}

Скрипка здесь: http://jsfiddle.net/steweb/9zMhY/ (без фиксированной высоты)

Мне нужна маска только потому, что я хочу сделать переход с контента-1 на контент-2. Нет никаких проблем с самим переходом (контент-1 трансформируется в -300px слева и контент-2 трансформируется в 0px слева).

Выше вы можете видеть, что высота установлена ​​на 300 пикселей, и overflow-x:hidden работает как положено!

НО Я не хочу устанавливать высоту маски! Ну, если я удаляю высоту, я ничего не вижу, просто удаляя overflow-x:hidden, все появляется.

Вопрос: без изменения метода позиционирования (мне нужно абсолютное позиционирование, с поплавком было бы намного проще), как я могу получить простой overflow-x без установки фиксированной высоты? Почему overflow-x:hidden скрывает все, а не просто все слева / справа?

Answer 1

Блочная модель абсолютно позиционированных элементов не влияет на их родительские контейнеры.

Это очень логично, потому что они просто не внутри, а абсолютны.Все остальное было бы странно.

Однако плавающие элементы ведут себя одинаково, что часто неудобно.

Обычная практика, чтобы исправить это, - "clearfix".Можно поместить что-то вроде нижней части вашего родительского контейнера.

Другой способ - установить высоту вручную.Я не совсем уверен, что вы хотите сделать, но вам действительно нужно, чтобы дети были абсолютными?

Answer 2

Маска теряет свою высоту, потому что вы position absolute ее дочерние элементы.

Если вы уберете это, она будет работать:

.content-item{
   position:absolute;
   width:300px;
}

Div являются блочными элементами, что означает, что они наследуютот их родителей, поэтому вам не нужно устанавливать значение 300. aprent уже absolute почему вы используете абсолютное значение для дочернего элемента div ?.

jsfiddle link: http://jsfiddle.net/9zMhY/3/