ansaurus

Question

Is by default absolute positioning relative to the document or to…?

Answer 1

+2 A:

I think what you're missing is that the viewport counts as the upper most element.

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

This mimics the behavior you said that you see. If you change the viewport size, the #abs div follows the right edge. Adding in a 2000px wide element does not change this.

<html>
<head>
    <style type="text/css">
     #wide{
      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="wide">
     wide
    </div>
    <div id="abs">
     test
    </div>
</body>
</html>

So I think your main problem is that your assumption is just wrong. Absolute positioning is relative to the viewport when nothing else has relative or absolute position that contains it.

idrumgood 2009-12-22 18:54:44

Uh, this is totally confusing - I assume by "viewport being the upper most element" you mean that viewport contains all other elements in a page, including element #abs? But if that is the case, then viewport also contains #wide element ( which has a width of 2000px).And if viewport also contains #wide element, then the width of viewport is at least 2000px and thus the far right of viewport should be 2000px away from the far left of the viewport?!

carewithl 2009-12-22 19:35:47

Also, you’re implying that viewport is only the window displayed by browser when horizontal bars are scrolled to the far left of the document, while as far as I know, viewport is any part of the document currently displayed by browser, even the part of the document which browser displays when horizontal scroll bars are scrolled to the far right of that document ( assuming document is very wide )?!

carewithl 2009-12-22 19:39:40

Viewport does not mean what you think it means. The viewport is the VISIBLE portion of the browser. If you drag your browser to be 900px wide, then the viewport is 900px. The viewport does not change based on the internal content.The viewport is not an actual element on the page, unlike, say, <body>. The <body> would indeed be 2000px if it contained a 2000px wide element, but not the viewport. The viewport is exactly the size that you make your browser window.

idrumgood 2009-12-23 16:27:11

I'm not exactly sure how to word my questions, so i apologize if they appear a bit confusing - I realize viewport is the visible portion of the browser. But if you scroll with horizontal scroll bars to the very far right of the document ( assuming we have a very wide document ), the visible portion will still be considered a viewport.Thus, if absolute positioning is relative to the viewport, then element positioned 0px from the right side of a viewport should always be visible, even when we scroll to the far right of document.

carewithl 2009-12-23 19:34:14

CSS is rendered based on the initial dimensions of the viewport. Ignoring pseudo classes like :hover and :focus, the css (and more specifically the positioning of elements) won't change when the page is scrolled. There is no event attached to a side scroll to have the page re-render where to position your item. That is why you don't see if stick to the side, even when you scroll over.

idrumgood 2009-12-28 15:34:31

ansaurus

tags:

views:

answers:

Is by default absolute positioning relative to the document or to…?

related questions