SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Absolute Positioning Confusion

    I thought I understood absolute positioning, but look at the CSS in the source for this simple program that positions a sprite to play a craps game.

    gpysports.org/dice.html

    The game works, but I put the game in an absolutely positioned div to place the game at the top right, so the background would show well. A normally positioned paragraph at the bottom of that div gives messages. However, when the message changed to a longer length it expanded the div left, moving the game, which was undesirable

    I made the paragraph absolutely positioned and that fixed everything. There is no movement and the paragraph stays within the containing div.

    Except that's not the way I thought absolute positioning worked.

    I assumed the absolutely positioned paragraph would be at top:0 and left:0 of the containing div, the default, laying over the buttons, so I'd have to position it. Yet it was in the right place, at the bottom of normal flow inside the div. I also thought the words would overflow the containing div, but they are staying inside it even though I gave no width to either div.

    So where am I thinking wrong? I checked a couple of books but they are very scanty on absolute positioning, to the point whether I wondered if the authors weren't clear on it. I thought I was but obviously I'm not ;')

    BTW, the program works in all the real browsers, but chokes a bit in IE8 if a tab is already open. Not sure why. I pray for deliverance from IE some day. IE9 Finally has CSS3 and HTML5, but in a clever marketing ploy, only if you buy Win 7, and a lot of institutions like libraries still have a lot of XP. So we'll be stuck with IE8 for a long time.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I assumed the absolutely positioned paragraph would be at top:0 and left:0 of the containing div, the default, laying over the buttons, so I'd have to position it.
    When you absolutely place an element it becomes removed from the flow at the exact point it occupies in the flow. It's only when you give it co-ordinates that it will be placed elsewhere its containing box (the nearest positioned parent).

    So if you have text that is under something else then the text won't rise up to the top when made position:absolute it will just become absolute at the position it is in already. Following content will overlap of course.

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I also wondered why it didn't overflow its containing box, since overflow is the default.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cybervigilante View Post
    Thanks. I also wondered why it didn't overflow its containing box, since overflow is the default.
    Overflow:visible is the default but it has no bearing here.

    The absolute element lives inside its containing block created by the nearest positioned ancestor (although the child takes no part in the flow) and so will wrap at the confines of that parent as required. Otherwise how could you place the element at top or bottom or left or right if it didn't know where the edges were.

    If none of the child's ancestors were positioned then the absolute element would live in the viewport and ignore the confines of its current parent.

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. CSS is obviously a bit more arcane than some of the CSS books I've looked at ;')


Tags for this Thread

Bookmarks

Posting Permissions

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