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)

Feb 12 '07 #1

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.

Feb 12 '07 #2

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

Feb 12 '07 #3

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/

Feb 12 '07 #4

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.

Feb 12 '07 #5

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!

Feb 12 '07 #6

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)

Feb 12 '07 #7