ansaurus

Question

Answer 1

A:

Ok lets suppose you have the following:

<body>
    <img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
    <div style="margin-bottom: 50px">Content here</div>
</body>

This should solve the problem. Obviously set the bottom margin to the height of the image. Otherwise you could try setting the bottom margin of the body tag to the height of the image, then set the bottom setting for the image to -{height of the image}. This should achieve the same effect as above though.

PS In case you didnt realise, margin-bottom is the amount of space that appears below an element. If you want a coloured background for the body and you want this to take effect around the footer (like, say, if your footer is only 80% of the screen and centred, leaving 10% at either end) then you could always try padding-bottom: 50px.

ClarkeyBoy 2010-10-11 23:41:18

Answer 2

+2 A:

It could be <html>?

Set position: relative on that and see what happens.

Update - Straight from quirksmode

The containing block

In order to specify the exact position of the element, you have to add top, bottom, left, and/or right declarations. These all give coordinates relative to the top/left or bottom/right reference point. What is this reference point?

position: static: No reference point, since a static block cannot be moved.

position: relative: The position the block would take if it were not moved (i.e. if it had position: static).

position: absolute: The containing block, which is the first ancestor element that does not have position: static. If there is no such ancestor, the <html> element serves as the containing block. (Note: in older browsers the <body> element serves as the default containing block.) <--- Bingo

position: fixed: The viewport (browser window).

Marko 2010-10-11 23:43:00

true! but then this seems very odd to me. Shouldn't position:relative be applied by default by the browsers ? why do we have to explicitly apply that. Doesn't feel like the correct behavior.

Rajat 2010-10-11 23:46:55

See my update @Rajat

Marko 2010-10-12 00:04:45

Answer 3

A:

Sounds like natural behaviour to me. You said the page would have lots of content and you would have a scrollbar. Having an element with position: absolute it would calculate it's position based on the nearest parent with position relative.

If the page is so high that you would have a scrollbar, the body element would stretch to the bottom of the page. Your image (position: absolute) is a child of body(position: relative), so I don't see the problem.

I also don't really understand your question:

I was trying to absolutely position an element at the bottom of the page (not the viewport).

This put the image at the bottom of the viewport over the existing content. However, once I added the following css rule:

body{ position:relative; }

The image went to the bottom of the page.

Isn't the problem solved now? Do you want the image at the very bottom? (when you scroll down you can see it) or do you want it just above the fold?

Claudiu 2010-10-11 23:44:51

This doesnt necessarily mean its solved. By my logic, positioning an image at the bottom when there is lots of content would actually place it over some of the content. I think it just needs padding on the body (or margin) to put the image below ALL the content. See my answer about this.

ClarkeyBoy 2010-10-11 23:49:33

The problem is solved for sure. But this means that BODY is not the containing block by default. After doing some more exploration, it seems that HTML tag is and it stretched only to the viewport. Adding a position:relative on the HTML tag causes it to be correct again.

Rajat 2010-10-11 23:53:49

I'm preety sure that you don't need that image positioned like that to do what you need. Of course, a link would be helpful, but there's definetly something you can do about it so you wouldn't resort to positioning the image like you do.

Claudiu 2010-10-11 23:59:37

@Claudiu Let me try to explain once again. The problem is to figure out the top level containing block, which BODY is not apparently.

Rajat 2010-10-12 06:33:06

Oh, ok, now I get it. I tought you're refering to the first parent of the image. Sorry for the confusion.

Claudiu 2010-10-12 08:05:05

Answer 4

A:

Maybe this is a bit silly, but i think there is the above the body. I use resets, and in some of the large ones is always a line like this: body, html { 'css properties bladiebla' }. So to me that suggests that html is the container for body, sounds pretty logical to me ;) (but i can't find any references or proof of it myself a.t.m.)

no1cobla 2010-10-12 00:03:10

ansaurus

tags:

views:

answers:

BODY tag as root level containing block

related questions