在頁腳上方製作一個固定欄

Question

我希望在頁腳上方製作一個固定欄，內容如下：「此站點處於測試階段，請發送反饋至info@blah.com。」

我是新來的CSS，併爲此而苦苦掙扎。

這裏是我的頁腳CSS：

#footer { 
    min-height: 60px; 
    padding-left: 20px; 
    padding-right: 20px; 
    background-color: #000000; 
    background-image: -moz-linear-gradient(top, #4d4d4d, #333333); 
    background-image: -ms-linear-gradient(top, #4d4d4d, #333333); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333)); 
    background-image: -webkit-linear-gradient(top, #4d4d4d, #333333); 
    background-image: -o-linear-gradient(top, #4d4d4d, #333333); 
    background-image: linear-gradient(top, #4d4d4d, #333333); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#333333', GradientType=0); 
    background-color: #424242; 
    background-image: -moz-linear-gradient(top, #4d4d4d, #333333); 
    background-image: -ms-linear-gradient(top, #4d4d4d, #333333); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333)); 
    background-image: -webkit-linear-gradient(top, #4d4d4d, #333333); 
    background-image: -o-linear-gradient(top, #4d4d4d, #333333); 
    background-image: linear-gradient(top, #4d4d4d, #333333); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#333333', GradientType=0); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); 
    box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); 
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); 
    box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); 
    height: 40px; 
} 
#footer a { 
    color: rgb(153, 153, 153); 
    text-decoration: none; 
} 
#footer span { 
    font-size: 10pt; 
    margin-left: .5em; 
    color: rgb(153, 153, 153); 
    text-decoration: none; 
    text-shadow: 0px 0px 0px 
} 
#footer-inner { 
    padding: 20px 0; 
} 

基本上我想它上面的一個小一點吧，其固定在頁腳和不搞砸了我的頁腳的格式。

我該怎麼做？

Answer 1

正如你沒有談到你的HTML標記，我從頭開始創建了一些東西。

可以的#footer位置設置爲相對於，然後創建的元素，即位於絕對具有負top - 值。因此，它會一直堅持下去的頁腳的頂部，並不會影響到頁腳本身既不以上內容：

<footer id="footer"> 
    <aside>This site is beta</aside> 
    Footer 
</footer>​ 

CSS

#footer { 
    position: relative; 
} 

#footer > aside { 
    position: absolute; 
    left: 0; 
    top: -50px; 
    width: 120px; 
    height: 40px; 
} 

這裏是

HTML一個demo on jsfiddle。