[Techtalk] CSS absolute positioning and overflow:hidden

[Julie Bovee Hill]

On 9/30/06, Akkana Peck wrote:
> Oh CSS gurus: I'm working on a Javascript project involving
> animation, but I'm running into a snag involving CSS and absolute
> positioning.
>
> The problem is that I want to position some images inside a
> box on a page.  Here's my test page:
>     http://shallowsky.com/bugs/absolute/
>
> I have a containing div (indicated by the inset border) which
> contains a little text plus two flower images. The flower images
> are style="position: absolute; left: 150px; top: 10px;" for the
> first flower, and the same with "left: 450px" for the second.
>
> All the references I've found say that absolute coordinates
> are relative to the containing element, so that "top: 10px"
> should put the top of the flowers inside the div. But instead
> I'm seeing them placed relative to the whole page.
>

Absolute positioning is positioned based on the nearest containing
absolutely positioned element or the browser window if no element is
found, whereas relative positioning is relative to the normal position
of the object. It should not make a difference whether you're using an
inline style, external stylesheet or internal stylesheet.

Also, I've found that you can't rely on Firefox & IE to display the
object in the exact same location on the page with absolute
positioning, but it should at least be close.

Julie