ie7 で DOM 要素に z-index を与えるソリューションを整理できません。わかりました、これは実際のマークアップです:
<div id="page-wrap">
<div class="push"></div>
<footer id="footer-container" class="source-org vcard copyright">
<div class="grass"></div>
<div id="footer"></div>
</footer>
ここにCSS:
#page-wrap {
height: auto !important;
margin: 0 auto -60px;
min-height: 100%;
position: relative;
width: 98%;
}
.push {
height: 60px;
}
#footer-container {
background-color: #1B1B1B;
bottom: 0;
height: 60px;
position: relative;
width: 100%;
}
.grass {
background-image: url("assets/images/grass.png");
background-repeat: repeat-x;
height: 82px;
position: absolute;
top: -78px;
width: 100%;
}
article, aside, figure, footer, header, hgroup, nav, section {
display: block;
}
#footer {
margin: auto;
position: relative;
top: 20px;
width: 960px;
}
それが役に立てば幸い。実際、これは ie9 や ie8 を含め、すべてのブラウザで正常に動作しています。