Question

我在div中创建了几个div :)。问题是FOOTER div打印在包含绝对div的div上方，而不是最后一个（在底部）。

我为页脚div尝试了一些组合，例如："position: absolute; top: 0px; left:0px"，但它仍然显示在页面顶部。

如何使用当前div将其移动到底部？ http://jsfiddle.net/hsbgpmus/2/

问题出在哪里？

增加：

我希望页脚div不在Web浏览器窗口的底部，而是在包含BBBB字符串的div之后的最后一个div。

Answer 1

试试这个

<div style="position:relative; height:600px">
<div style="width: 100px">
    <h1>HEaDER</h1>
    <div>
        <div style="position: static">
            <div style="padding: 10px; position: absolute; top: 100px; left: 100px; background-color: yellow;">aaaaa</div>
            <div style="padding: 10px; position: absolute; top: 200px; background-color: yellow;">cccc</div>
            <div style="padding: 10px; position: absolute; top: 300px;  background-color: yellow;">bbbb</div>
        </div>
        <div style="position: absolute; bottom:0">
            <h1>FOOTER</h1>
        </DIV>
    </div>

http://jsfiddle.net/anjum121/xmox7pjq/

您需要将父div包装到相对位置

Answer 2

您在示例小提琴中使用了＆＃34; position：static＆＃34; 。静态意味着元素将像往常一样流入页面。

了解更多信息。关于使用css定位元素请参考this link。

绝对定位元素并将顶部和左侧设置为0px意味着您要将其对齐在顶部。要在父元素底部对齐元素，您必须设置底部属性（不是顶部属性）

CSS代码：

<footer_element_class_or_id> {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

希望它有所帮助。

Answer 3

使用以下代码作为页脚，

position: absolute; bottom: 0px; left:0px

Answer 4

试试这个小提琴

http://jsfiddle.net/hsbgpmus/3/

.footer{

    position:absolute;
    bottom:0;

}

html

<div class ="footer"><h1>FOOTER</h1></DIV>

绝对和相对div定位

4 个答案: