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.

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.

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.:slight_smile:

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.

Thanks. CSS is obviously a bit more arcane than some of the CSS books I’ve looked at ;')