[Techtalk] CSS absolute positioning and overflow:hidden

Shirrell shirrell at pstat.com
Sat Sep 30 20:27:00 UTC 2006

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
>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.
It you place a style section before the </head> which contains something 

one { position: absolute: left:150px; top:10px; }
two { position: absolute: left:450px: top:10px; }



and then use somethinkg like:

 <img class="one" src="flower1.gif"  alt=""/>
 <img class="two" src="flower2.gif" alt=""/>

the images appear inside the containing box.

Shirrell at pstat.com

More information about the Techtalk mailing list