absolute positioning

[Mark]

hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html

<div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

where 'thumb' is my container, and 'del' should be aligned to the top
right. here's the css

..del {
position: absolute;
top: 0;
right: 0;

}

however..it seems to align to the top right of my top level div (the
page container)

anyone know how i might fix this? or perhaps an alternative solution?
(the 'x' is supposed to be overlayed on the top right corner of my
image)

[Ben C]

On 2007-02-12, Mark <mn*******@gmail.comwrote:

hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html

<div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

where 'thumb' is my container, and 'del' should be aligned to the top
right. here's the css

.del {
position: absolute;
top: 0;
right: 0;

}

however..it seems to align to the top right of my top level div (the
page container)

anyone know how i might fix this?

Make the container (div.thumb) position:relative. That should keep it in
the normal flow, where you want it, but cause it to become the
"containing block" for your positioned thing.

[Rik]

On Mon, 12 Feb 2007 10:58:17 +0100, Mark <mn*******@gmail.comwrote:

hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html

<div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

where 'thumb' is my container, and 'del' should be aligned to the top
right. here's the css

.del {
position: absolute;
top: 0;
right: 0;

}

however..it seems to align to the top right of my top level div (the
page container)

anyone know how i might fix this? or perhaps an alternative solution?
(the 'x' is supposed to be overlayed on the top right corner of my
image)

An absolute positioned element will be positioned to the first ancestor
element with a positioning other then 'static'. So you can do this:

div.thumb{
position:relative;
}
..del{
position: absolute;
top: 0;
right:0;
}

--
Rik Wasmus

[Jukka K. Korpela]

Scripsit Rik:

><div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

Side note: the OP should fix the markup, by removing the spurious newline
inside an attribute value (it might not be there in reality, but we cannot
tell since no URL was included [hint hint]), by adding the required alt
attribute, and by changing "&" to "&amp;". Not all markup errors mess up CSS
styling, but that's no excuse for sloppy markup.

An absolute positioned element will be positioned to the first
ancestor element with a positioning other then 'static'.

Indeed. Apparently people all too often regard "absolute positioning" as
absolute positioning. The name is seriously misleading, since "absolute
positioning" is just as relative as "relative positioning", though relative
to something different (namely an enclosing block rather than the position
that the element would have without positioning).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2007-02-12, Jukka K. Korpela <jk******@cs.tut.fiwrote:

Scripsit Rik:

>><div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

Side note: the OP should fix the markup, by removing the spurious newline
inside an attribute value (it might not be there in reality, but we cannot
tell since no URL was included [hint hint]), by adding the required alt
attribute, and by changing "&" to "&amp;". Not all markup errors mess up CSS
styling, but that's no excuse for sloppy markup.

>An absolute positioned element will be positioned to the first
ancestor element with a positioning other then 'static'.

Indeed. Apparently people all too often regard "absolute positioning" as
absolute positioning. The name is seriously misleading, since "absolute
positioning" is just as relative as "relative positioning", though relative
to something different (namely an enclosing block rather than the position
that the element would have without positioning).

It is very confusing I agree. Absolute positioning (as opposed to
"absolute positioning") is achieved in CSS with position: fixed.

[Mark]

An absolute positioned element will be positioned to the first ancestor

element with a positioning other then 'static'. So you can do this:
Rik Wasmus

oh, I didnt know it worked like that. this fixes the problem, thank
you so much!

[Mark]

Side note: the OP should fix the markup, by removing the spurious newline

inside an attribute value (it might not be there in reality, but we cannot
tell since no URL was included [hint hint]), by adding the required alt
attribute, and by changing "&" to "&amp;". Not all markup errors mess up CSS
styling, but that's no excuse for sloppy markup.
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

the newline wasn't in my original markup, I'm usually pretty clean
about that.
if you want a link, here you go http://www.mnbayazit.com/?p=gallery
although you won't be able to see the x's on the photos because you
may only delete photos that you have uploaded
(which you aren't able to do unless you sign up.... which you also
can't do...hence the no link)