HTML中怎样固定页眉页脚，不随内容变化

Question

 <div data-role="footer" data-position="fixed">
    <div class="nav">
        <li> <a  class="link" href="#"  style="background: url(icon-36x36-menu-on.png)no-repeat ;background-position: top;background-size: 20px "> 精选</a> </li>
        <li> <a href="#" style="background: url(news1.png)no-repeat ;background-position: top;background-size: 20px ">购物车</a>  </li>
        <li><a href="#" style="background: url(products1.png)no-repeat ;background-position: top;background-size: 20px ">充值</a></li>
        <li><a href="#" style="background: url(icon-36x36-phone.png)no-repeat ;background-position: top;background-size: 20px ">我的</a></li>
    </div>
</div>

Answer 1

 z-index