wrapping absolute divs doesn't work - html

Question

I want my #wrap to have bottom:0 so that my cards all align to the bottom of the viewport but it doesn't seem work when I applied position absolute to the wrapper. Why does it so?
<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

Here you go buddy
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

The wrapper itself must be positioned absolutely at the bottom and then the cards must be offset within the wrapper.
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

it seems that you specify that you need the stack of cards on the bottom of the viewport, well position: absolute align items against the page, if you want to align items against the viewport you could use position: fixed.
Here I edited your sample:
.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>
This way your items will stick to the bottom of the viewport even if you scroll down.
How it works is that wrapper has no height but it does not hide the overflow and cards are positioned not from the top(like in your example) but from the bottom (reverse of what you did)
Don't forget that if you want the items to be over other content to adjust z-index property.