CSS：將一個按鈕/文本在Div的Bootom權與內容

Question

我要放置在一個div右下角內容的一些內容，我想出了這個：

#superDiv, 
#childDiv { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#childDiv { 
    z-index: 30; 
    float: right; 
    position: bottom; 
} 

這是一個Plunk我已經取得 http://plnkr.co/edit/WaP5Pde7CXnAfnW3QybF?p=preview

缺少什麼？

Answer 1

更改您的代碼到這一點：

#container { 
    width: 100%; 
    height: auto; 
    position: relative; 
} 

#superDiv { 
    width: 100%; 
    height: auto; 
    z-index:10; 
    position: relative; 
} 

#childDiv{ 
    position: absolute; 
    bottom: 20px; 
    right: 0; 
    z-index: 30; 
} 

Answer 2

#childDiv { 
    z-index: 30; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

Answer 3

我已經編輯您的Plunk地做你想要它。我從

#superDiv { 
    width: 100%; 
    height: 100%; 
    position:relative; /* Note the change in position absolute -> relative */ 
    top: 0; 
    left: 0; 
} 

在此之後，我已經把刪除的#childDiv您#childDiv到：

#childDiv{ 
    z-index: 30; 
    float:right; 
    position:absolute; 
    right:0; 
    bottom:0; 
} 

它在你#superDiv的右下角將其定位。

Answer 4

position: bottom不存在。而且你不需要float:right，因爲你正在使用絕對位置。

#container { 
    width: 100%; 
    height: auto; 
    position: relative; 
} 
#superDiv { 
    width: 100%; 
    height: auto; 
} 
#childDiv { 
    position: absolute; 
    bottom: 10px; /* 5px margin-top + 5px margin-bottom */ 
    right: 0; 
} 

希望有所幫助。