Is by default absolute positioning relative to the <html> element or to…?

sqlsurfing

12-22-2009, 08:10 PM

Hi

As far as I know, absolute positioning is relative to a containing block that provides a positioning context, which by default, is the <html> element. Thus, by default, absolute positioning should be specified with respect to the edges of <html> element.

For example, assuming <html> element contains an element E with width of 2000px, then the width of <html> element is around 2000px and thus the following code:

#abs
{
position: absolute;
top: 128px;
right: 0px;
width: 100px;
}

should place an element #abs to the far right of <html> element ( distance between far right and far left of the <html> is around 2000px ). In other words, #abs element should be visible ( on the right side of browser window ) only when horizontal scroll bars are scrolled to the far right of the document. Instead, #abs is visible ( on the right side of browser window ) when horizontal bars are scrolled to the far left of the document. What am I missing?

Thanx

ckeyrouz

12-22-2009, 08:15 PM

post your html code to check what the problem is.

sqlsurfing

12-22-2009, 08:38 PM

I’m currently only learning HTML and CSS and thus it’s not like I want to construct a html site with certain looks, instead I’m more interested in why absolute positioning works the way it works. Anyways, here is the sample code:

<html>
<head>
<style type="text/css">
#E{
width: 2000px;
height: 1px;
}
#abs{
position: absolute;
top: 128px;
right: 0px;
width: 100px;
height: 100px;
background-color: #333;
}
</style>
<title>test</title>
</head>
<body>
<div id="E">
<p>E</p>
</div>
<div id="abs">
<p>abs</p>
</div>
</body>
</html>

Rowsdower!

12-22-2009, 08:47 PM

sqlsurfing

12-22-2009, 08:57 PM

You need to specify a doctype (http://www.w3schools.com/tags/tag_DOCTYPE.asp) for the page to get reliable results from CSS (and in particular, from CSS positioning). When building a new page it's best to use a strict doctype (either XHTML1.0 strict or else HTML 4.01 strict).

Add one of those and see if results improve.

I did specify the strict doctype ( I've omitted it in this thread for the sake of clarity ) and according to the book I'm learning, page is displayed correctly. As I've mentioned previously, I'd like to know why absolute positioning works the way it does and not whether my page is displayed correctly

Excavator

12-22-2009, 11:25 PM

Hello sqlsurfing,
The way you've written it now, your #abs is positioning itself top: 128px;right: 0px; measured off the body of the document.
If you moved #abs inside #E and set #E to position:relative; #abs would position itself measured off #E.

Does that make sense?

Try this for a demonstration - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {background: #fc3;} /*color for demonstration only*/
#E {
width: 800px; /*narrowed up for demo*/
height: 1px; /*does not allow #E to enclose the text you've put in it*/
background: #00f; /*also for demo*/
position: relative;
}
#abs {
position: absolute;
top: 128px;
right: 0px;
width: 100px;
height: 100px;
background: #333;
}
</style>
</head>
<body>
<div id="E">
<p>E</p>
<div id="abs">
<p>abs</p>
</div>
</div>
</body>
</html>