Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

    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

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    post your html code to check what the problem is.
    Software and cathedrals are much the same - first we build them, then we pray.

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    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>

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You need to specify a doctype 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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    You need to specify a doctype 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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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>
        <!--end E--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •