Наложение двух отделений и 'очистка' их родительского отделения
Мой CSS-fu позволяет мне здесь: То, что я хотел бы сделать, является положением два дочерних отделения (с переменными высотами) для наложения.
Используя: position: absolute; top: 0px; left: 0px; единственный способ, которым я знаю, как, с родителем установил на position: relative.
Проблема с этим состоит в том, что дочерние отделения вынуты из расположения согласно спецификации CSS, уменьшив родительское отделение к высоте: 0px, так, чтобы я не мог очистить то отделение и поместить любое содержание ниже.
Мое удивительное ASCII-творчество ниже детализирует то, что я иду для... любых идей?
Как в стороне, мне нужны эти отделения для наложения точно для гладкого jQuery, исчезает, и возможно испытывающий часть нового WebKit преобразовывает, а-ля cardflip демонстрация Apple: https://developer.apple.com/library/archive/samplecode/CardFlip/Introduction/Intro.html
Если существует другой способ перекрыть их точно в CSS, и/или если существует другой способ получить подобное cardflip действие (использующий jQuery или Webkit/CSS) с двумя дочерними отделениями переменных высот, я внимательно слушаю!
|-------------------------------------------------|
| Parent div |
| |-------------------------------------------| |
| | | |
| | DIVS 1 & 2 (overlapped) | |
| | | |
| |-------------------------------------------| |
|-------------------------------------------------|
...more content below, after clearing the parent...
2 ответа
Как насчет того, чтобы просто установить один из них в postition:absolute? Таким образом, один дочерний div будет по-прежнему давать высоту родительскому div, а другой будет выведен из потока.
.parent { position: relative; }
.child1 { position: absolute; top:0; left:0; }
.child2 { position: relative; }
Просто предложение jQuery:
var height1 = $(".child1").height();
var height2 = $(".child2").height();
if(height1 > height2)
$(".child2").height(height1);
else
$(".child1").height(height2);
И теперь у вас будет плавное перетекание между двумя
А как насчет положения : относительные и отрицательные поля?
Не в моей голове:
.parent {}
.child1 {
height: 200px;
}
.child2 {
margin-top: -200px;
height: 200px;
}