Closed Bug 172823 Opened 22 years ago Closed 22 years ago

position:absolute div is positioned to viewport


(Core :: CSS Parsing and Computation, defect)

Windows NT
Not set





(Reporter: bugzilla, Assigned: dbaron)




User-Agent:       Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.2b) Gecko/20021003
Build Identifier: Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.2b) Gecko/20021003

i have this position: absolute div in my page that i positioned with right:
10px; and bottom: 0px; to get it in the lower bottom of the page. however, it
shows up half way.

it shows up at the bottom of the viewport, as if i said position: fixed. but
then, it isn't fixed, since when you scroll down the divs moves along with the page.

if you take a look at the URL, it's the 'lastmodified' div.

i'll attach a few screenshots.

Reproducible: Always

Steps to Reproduce:
what happends if you change :
"div.lastmodified {" to ".div.lastmodified {" ?
and don't forget to reload with "shift+reload" or clearing the cache...
then the whole thing moves to the bottom left, and is displayed normal size,
normal font.

which is quite logical, since it wouldnt match 'class="lastmodified"'.
Not a bug. The position of an absolutely positioned element is
relative to the position of its nearest _positioned_ ancestor.
That would be the <html> element (= the viewport).
To get the desired effect, try adding

body {
  position: absolute;
  top: 0;
  left: 0;

to your stylesheet.
then why does the CSS2 spec say this:

"The box's position (and possibly size) is specified with the 'left', 'right',
'top', and 'bottom' properties. These properties specify offsets with respect to
the box's containing block."

The containing block is the <body> tag. 

However, if I follow your reasoning (which seems, reading the specs and examples
for the gazillionth time) fairly correct, where does it state that <html> =
viewport? If you continue this line of reasoning, doesn't position: absolute
becomes position:fixed? why isn't <html> the *complete* document?

(oh, and why the hell doesnt 'text-align: right' anymore if i try your suggestion?)

Remember me that I file a bug against Opera :)
Re: comment 5

Your CSS2 quote is obviously correct.

However, although it may seem otherwise, <body> is not really the containing
block because in the case of absolutely positioned elements, a different
definition of the term needs to be applied.

The CSS2 spec says (9.8.4):

"The containing block for a positioned box is established by
 the nearest positioned ancestor (or, if none exists, the
 initial containing block [...])".

<body> is (by default) not positioned so it's not the containing block here.
<html> is, I don't know whether it's because it's implicitly positioned or
because it just happens to be the initial element. Anyway, that's why your
<div> is positioned relative to <html>. And since it's "absolute" and not
"fixed", it moves along when scrolling the page.

Also, <html> IS the entire document. I guess you can think of it as having
an implicit "overflow: scroll" style.
-> dbaron
Assignee: attinasi → dbaron
Component: Layout → Style System
QA Contact: petersen → ian
> That would be the <html> element (= the viewport).

Nope.  The viewport is not the root element; it's just a viewport onto the
drawing canvas (this is much more obvious in paged media than in screen media --
there each page is a separate viewport, effectively).

> I guess you can think of it as having an implicit "overflow: scroll" style.

Nope.  The viewport scrollbar has nothing to do with the root element.

*** This bug has been marked as a duplicate of 105286 ***
Closed: 22 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.