바닥 글 위의 고정 막대 만들기

Question

"이 사이트는 베타 버전입니다. info@blah.com으로 의견을 보내주십시오."라는 내용의 바닥 글 위에 고정 막대를 만들고 싶습니다.

저는 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; 
} 

는 기본적으로 나는 바닥 글에 고정되어 그 내 바닥 글의 서식을 망치지 않는 위에 단지 작은 작은 막대를 원하는 :

여기 내 바닥 글 CSS입니다.

어떻게하면됩니까?

Answer 1

HTML 마크 업에 대해 말하지 않았으므로 처음부터 무언가를 만들었습니다.

넌 상대적으로#footer의 위치를 ​​설정 한 후, 소자를 만들 수 있다는 부정적인 top -value 절대적으로위치된다. 그래서 항상 바닥 글의 상단에 부착하고 바닥 글 자체 위의 내용도에 영향을 미치지 않습니다 : 여기에

<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을 a demo on jsfiddle.