обертывания абсолютных дивы не работают

Question

Я хочу, чтобы мой #wrap иметь дна: 0 так что мои карт все выравниваются по нижней части окна просмотра но это, кажется, не работать, когда я применил позицию абсолютной к обертка. Почему это так?

<div id="wrap"> 
<div class="card" id="card1">black</div> 
<div class="card" id="card2">pink</div> 
<div class="card" id="card3">orange</div> 
</div> 

CSS

.card{ 
    border:1px solid black; 
    height:120px; 
    width:100px; 
    position:absolute; 
    -webkit-border-top-left-radius: 10px; 
-webkit-border-top-right-radius: 10px; 
-moz-border-radius-topleft: 10px; 
-moz-border-radius-topright: 10px; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
} 

#wrap{ 
    position:absolute; 
    bottom:0; 
    height: 100% !important; 
min-height: 100% !important; 
} 

#card1{ 
    background:black; 
    top:0; 
} 

#card2{ 
    background:pink; 
    top:10px; 
} 

#card3{ 
    background:orange; 
    top:20px; 
} 

http://jsfiddle.net/t94vdwak/1/

Answer 1

Держи дружище

http://jsfiddle.net/incept0/rrapj20o/4/

.card{ 
    border:1px solid black; 
    height:120px; 
    width:100px; 
    position:absolute; 
    bottom: 0; 
    left: 0; 
    -webkit-border-top-left-radius: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
} 

#wrap{ 
    position:absolute; 
    bottom:0; 
    left: 0; 
    height: 120px; 
    min-height: 120px; 
} 

#card1{ 
    background:black; 
    top:0; 
} 

#card2{ 
    background:pink; 
    top:10px; 
} 

#card3{ 
    background:orange; 
    top:20px; 
} 

Answer 2

Сама обертка должна располагаться Absol а внизу карты должны быть смещены внутри обертки.

http://jsfiddle.net/ryvvyqfc/

.card { 
    border:1px solid black; 
    height:120px; 
    width:100px; 
    position:absolute; 
    -webkit-border-top-left-radius: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
} 

#wrap{ 
    position:absolute; 
    bottom:0; 
} 

#card1{ 
    background:black; 
    top:0; 
} 

#card2{ 
    background:pink; 
    top:10px; 
} 

#card3{ 
    background:orange; 
    top:20px; 
} 

Answer 3

, кажется, что вы указали, что вам нужна стопка карт в нижней части окна просмотра, а position: absolute выравнивание элементов на страницу, если вы хотите, чтобы выровнять элементы против видовых вы могли бы использование position: fixed.

Здесь я редактировал свой образец:

.card{ 
 
    border:1px solid black; 
 
    height:120px; 
 
    width:100px; 
 
    position:absolute; 
 
    -webkit-border-top-left-radius: 10px; 
 
    -webkit-border-top-right-radius: 10px; 
 
    -moz-border-radius-topleft: 10px; 
 
    -moz-border-radius-topright: 10px; 
 
    border-top-left-radius: 10px; 
 
    border-top-right-radius: 10px; 
 
} 
 
#wrap{ 
 
    position:fixed; 
 
    bottom:0; 
 
    overflow: visible; 
 
} 
 
#card1{ 
 
    background:black; 
 
    bottom:20px; 
 
} 
 
#card2{ 
 
    background:pink; 
 
    bottom:10px; 
 
} 
 
#card3{ 
 
    background:orange; 
 
    bottom:0px; 
 
}

<div id="wrap"> 
 
    <div class="card" id="card1">black</div> 
 
    <div class="card" id="card2">pink</div> 
 
    <div class="card" id="card3">orange</div> 
 
</div>

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

Как это работает, что обертка не имеет высоты, но он не скрывает переполнение и карты расположены не сверху (как в вашем примере), а из нижней части (реверс, что вы сделали)

Дон Не забывайте, что если вы хотите, чтобы элементы были над другим контентом, чтобы настроить свойство z-index.