BODY tag as root level containing block
I was trying to absolutely position an element at the bottom of the page (not the viewport). The element is a direct child of the BODY. You can开发者_开发问答 imagine the page to have lots of content so that there is a scrollbar.
So something like this:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
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.
So if BODY is not the containing block of all elements, what is ?
Also, I am sure this is a solved problem but I couldn't find an example with detailed explanation of the problem and the solution. Any pointers?
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.)<--- Bingoposition: fixed: The viewport (browser window).
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.
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?
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.)
加载中,请稍侯......
精彩评论