包裝絕對的div不起作用

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財產。