首页 > css使用position:absolute之后的元素如何定位

css使用position:absolute之后的元素如何定位

html结构如下:

<body>
    <div id="wrap">
        <div id="header"></div>

        <div id="main">
            <div id="left"></div>
            <div id="right"></div>
        </div>

        <div id="footer"></div>
    </div>
</body>

<div id="header">使用position: fixed; top: 0; left: 0;
<div id="main">处使用了position: absolute; top: 79px; left: 0;

由于id="main"的高度是由内容来的多少来定的,无法确定整个main div的高度,下面的<div id="footer">不知道如何定位。

请问如何解决?


absolute 值会让 main 这个 div 脱离正常的文档流,那么你的 footer 就会直接无视 main 跳到最上面,请改为 relative。我建议给 main 的高度设一个 min-height,那么 footer 首先会一直位于下方的固定位置,当内容高度超过 min-height 时高度便开始自动适应。
btw,我有篇博文专门对 position 问题进行了总结,不妨一读。:)

《详解 CSS 属性 - position》

【热门文章】
【热门文章】