CSS positioning (IE?)

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I'm trying to create a script that can position icons on top of an
image automatically.  Doing that is, of course, the easy part, the hard
part is the positioning because I seem to be missing something about
containing blocks.

Basically, I've tried doing it two ways.  The first was to use
"relative" positioning.  So I'd make something like:

.item1 { position: relative; left: 500px; top: 500px; }
.item2 { position: relative; left: 500px; top: 500px; }

<div id="CB">
<img class="item1" .../>
<img class="item2" .../>

In this case, the items are positioned relative to the block "CB" like
I'd expect.  However, the positioning is weird.  Item1 appears where
I'd expect it to: (x,y) (500,500)  But item2 doesn't make sense to me.
It's not at (500,500) or (1000,1000), it's at (516, 500).  I don't know
where it got the 16 extra pixels, or why it only skews in the x

So I said, Okay, let's try absolute positioning, since all the
documentation in CSS2 says it'll be positioned absolutely from the
containing block.
-> http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme

So I use the same code but change both "position: relative" to
"position: absolute".  As expected, the images line up perfectly.

So then I change the code just a bit so that it's:

<h1>Some text</h1>
<div id="CB">
<img class="item1" .../>
<img class="item2" .../>

And now the images aren't in the same place.  That is, they're in the
exact same place as they were on the page, not where they were in the
DIV tag, which makes me think I've failed to convince IE that this is a
containing block?

I'm hoping it's clear what I want to do?  I have a background image in
the DIV tag (a map) and am using images to put waypoints on the map.  I
want to be able to store their (x,y) in a database and be able to use
them without worrying about the rest of the page structure.

Any suggestions for how to do this, either by fixing the methods above
or taking a new approach?

Thanks for any help that can be offered.


Re: CSS positioning (IE?)

To further the education of mankind, mike@hitori.org vouchsafed:

Quoted text here. Click to load it

You need to relatively position the parent container.

Infinity has its limits.

Re: CSS positioning (IE?)

mike wrote:

Quoted text here. Click to load it

No they're not. They're positioned RELATIVE TO WHERE THEY WOULD NORMALLY

Quoted text here. Click to load it

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).

Quoted text here. Click to load it

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).

Quoted text here. Click to load it

Yes -- absolute positioning is what you *should* be using here.

Quoted text here. Click to load it

Then you're reading the CSS 2 documentation wrong!

Absolutely positioned elements are positioned absolutely NOT FROM THE

That is, in:

<div id="e1">
  <div id="e2" style="position:relative">
    <div id="e3">
      <div id="e4" style="position:absolute">

... the element 'e4' is positioned not from 'e3', but from 'e2' because
'e2' is the nearest containing *POSITIONED* element!

Quoted text here. Click to load it

You want to add the following to your stylesheet:


Quoted text here. Click to load it

Read the CSS 2 recommendation again -- the parts on positioning especially.

Toby A Inkster BSc (Hons) ARCS
Contact Me  ~ http://tobyinkster.co.uk/contact

Site Timeline