From joulie at gmail.com Sun Oct 1 17:00:07 2006 From: joulie at gmail.com (Julie Bovee Hill) Date: Sun Oct 1 17:06:30 2006 Subject: [Techtalk] CSS absolute positioning and overflow:hidden In-Reply-To: <20060930183143.GA26252@shallowsky.com> References: <20060930183143.GA26252@shallowsky.com> Message-ID: 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 From akkana at shallowsky.com Sun Oct 1 18:20:56 2006 From: akkana at shallowsky.com (Akkana Peck) Date: Sun Oct 1 18:20:58 2006 Subject: [Techtalk] CSS absolute positioning and overflow:hidden In-Reply-To: References: <20060930183143.GA26252@shallowsky.com> Message-ID: <20061001182056.GA19242@shallowsky.com> Julie Bovee Hill writes: > Absolute positioning is positioned based on the nearest containing > absolutely positioned element or the browser window if no element is Yikes! The container has to be absolutely positioned too? None of the references I saw mentioned that -- but sure enough, it works (even the overflow: hidden) if I position the container absolutely. Of course, that's not an option for a real page, since I can't predict where the div should be without knowing the user's fonts and resolution and all that. I guess there's no way to use absolute positioning if I want the rest of the page to flow normally and resize properly. I'll investigate using margin-left instead. Thanks for clearing that up, Julie! Even if I don't like the answer, it's good to know why it was happening. -- ...Akkana "Beginning GIMP: From Novice to Professional": http://gimpbook.com From shirrell at pstat.com Sun Oct 1 20:10:48 2006 From: shirrell at pstat.com (Shirrell) Date: Sun Oct 1 20:11:21 2006 Subject: [Techtalk] CSS absolute positioning and overflow:hidden References: <20060930183143.GA26252@shallowsky.com> <451ED314.3000605@pstat.com> <20060930220815.GE26252@shallowsky.com> Message-ID: <452020C8.1090702@pstat.com> Akkana Peck wrote: >Shirrell writes: > > >>It you place a style section before the which contains something >>like: >> >> >> >>and then use somethinkg like: >> >> >> >> >>the images appear inside the containing box. >> >> > >Any idea why it behaves differently when the absolute coordinates >are in a