absolute and relative div positioning

Question

I have created a few divs inside divs:). The problem is that the FOOTER div is printed above the div which contains absolute divs and is not dipalyed as last (at the bottom).

I tried a few combinations for footer div like: "position: absolute; top: 0px; left:0px" , but it still displyed at the top of page.

How to move it to the bottom with current divs? http://jsfiddle.net/hsbgpmus/2/

Where is the problem?

ADDED:

I want to have footer div not at the bottom of web browser window, but as last div right after div containing BBBB string.

Answer 1

try this

<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/

you need to wrapp your parent div to relative position

Answer 2

You have used "position:static" in your example fiddle. Static means the element will flow into the page as it normally would.

For more info. about positioning element using css refer this link .

Positioning element absolutely and setting top and left to 0px means you want to align it at the top. To align element at the bottom of the parent element, you have to set bottom property (not top property)

CSS code :

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

Hope it helps.

Answer 3

将以下代码用作页脚，

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

Answer 4

try this fiddle

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

.footer{

    position:absolute;
    bottom:0;

}

html

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