Why position:relative for body?, Professional web designers do the damnedest things Options

[Hoary]

I quote a CSS file that I'm not authorized to tamper with, as must be invoked by a page I am allowed to tamper with:

body {
width: 790px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-size: 80%;
color: #112b79;
height: 100%;
background: #112b79;
position:relative;
}

Of course the width ought not to be set, and neither should the font size. There are several other infelicities too. But that's web design professionalism for you. I'm used to this stuff. By contrast, what puzzles me is the use of the "position" property. With no additional "top" or "left", what sort of thing is it supposed to do?

I know one thing it does do. It moves rightwards a "lightbox" that's supposed to appear at the centre (using this). (This is my addition and the pro designers can't have been expected to foresee it.) I don't even understand how it does this, and my ignorance troubles me.

Anyway, I've annuled it for now, simply by adding an inline position:static style to the particular body tag. The lightbox appears at the centre, and there seems to be no other effect. However, the World's Best-Loved Browser doesn't run on this computer, and I tremble at the thought of what "quirks" might lurk.

[pandy]

By contrast, what puzzles me is the use of the "position" property. With no additional "top" or "left", what sort of thing is it supposed to do?

Most likely this is so BODY can act as conaining block for child boxes that are positioned absolute.

http://www.w3.org/TR/CSS2/visuren.html#propdef-position
http://www.w3.org/TR/CSS2/visudet.html#con...g-block-details

[Hoary]

Thanks, Pandy. I understand the words, phrases, clauses, and sentences in that, yet still can't quite figure out exactly what it means. But at least it doesn't seem to be quirks-oriented, so I can tentatively/dangerously assume that IE 6 and similar nightmare browsers won't now do something very strange.

I'm off to my office, where I keep one of Eric Meyer's books. It's a bit less cryptic than W3's own explanation. I'll ask again later -- or just buy a "dummies" book? -- if I still can't figure it out.

[pandy]

It isn't as cryptic as it may sound. When you use position: absolute, the offset is relative the closest ancestor with a position other than static (and when there is no such ancestor it's positioned relative the "initial containing block"). If you try the below, you can see that the red boxes are offset relative the edges of the yellow box.

HTML

<div style="position: relative; margin-top: 300px; width: 300px; height: 300px; background: yellow">
<div style="position: absolute; top: 50px; left: 50px; width: 50px; height: 50px; background: red"></div>
<div style="position: absolute; top: 100px; left: 100px; width: 50px; height: 50px; background: red"></div>
<div style="position: absolute; top: 150px; left: 150px; width: 50px; height: 50px; background: red"></div>
<div style="position: absolute; top: 200px; left: 200px; width: 50px; height: 50px; background: red"></div>
</div>

If you remove the position: relative from the styling of the yellow box, the red boxes flies out of the yellow box and instead are position relative the edges of the browser (really relative the "initial containing block", but that's a very esoteric concept and in the normal case we can pretend it's the browser window).

Since BODY is given a width here, you can basically see it as just another box. To repeat the above but with BODY as the containing block you have to position it. So with position: absolute, it's about to establish a context, you could say. You must control relative what the AP box will be positioned. Well, you mustn't. But it's kind of hazardous to do it randomly.

HTH a little anyway.

[Christian J]

Occasionally one does use "position: relative" as a fix for various CSS bugs in MSIE. See e.g. http://www.communitymx.com/content/article.cfm?cid=C37E0 (a bit down).

[Dr Z]

Occasionally one does use "position: relative" as a fix for various CSS bugs in MSIE. See e.g. http://www.communitymx.com/content/article.cfm?cid=C37E0 (a bit down).

I learned something new! Thanks.