|
|
Posted by Toby Inkster on 06/13/44 11:51
mike wrote:
> <body>
> <div id="CB">
> <img class="item1" .../>
> <img class="item2" .../>
> </div>
> </body>
>
> In this case, the items are positioned relative to the block "CB" like
> I'd expect.
No they're not. They're positioned RELATIVE TO WHERE THEY WOULD NORMALLY
APPEAR!
> Item1 appears where I'd expect it to: (x,y) (500,500)
Yes. Its normal position would be at (0,0), so with a relative position of
(500,500) it appears at (0+500,0+500) = (500,500).
> But item2 doesn't make sense to me. It's not at (500,500) or
> (1000,1000), it's at (516, 500).
Item2's normal position (if there was no relative positioning going on)
would be (16,0), so it appears at (16+500,0+500) = (516,500).
> So I said, Okay, let's try absolute positioning,
Yes -- absolute positioning is what you *should* be using here.
> since all the documentation in CSS2 says it'll be positioned absolutely
> from the containing block.
Then you're reading the CSS 2 documentation wrong!
Absolutely positioned elements are positioned absolutely NOT FROM THE
CONTAINING BLOCK, but from the NEAREST CONTAINING POSITIONED ELEMENT.
That is, in:
<div id="e1">
<div id="e2" style="position:relative">
<div id="e3">
<div id="e4" style="position:absolute">
foo
</div>
</div>
</div>
</div>
.... the element 'e4' is positioned not from 'e3', but from 'e2' because
'e2' is the nearest containing *POSITIONED* element!
> <body>
> <h1>Some text</h1>
> <div id="CB">
> <img class="item1" .../>
> <img class="item2" .../>
> </div>
> </body>
You want to add the following to your stylesheet:
#CB{position:relative}
> Thanks for any help that can be offered.
Read the CSS 2 recommendation again -- the parts on positioning especially.
--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Navigation:
[Reply to this message]
|