467,877 Members | 1,288 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,877 developers. It's quick & easy.

absolute positioning

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
  • viewed: 2654
Share:
6 Replies
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
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
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
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
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Tom Szabo | last post: by
6 posts views Thread by Gustaf Liljegren | last post: by
4 posts views Thread by mike eli | last post: by
4 posts views Thread by Alan Silver | last post: by
20 posts views Thread by mehstg1319 | last post: by
14 posts views Thread by Fistro | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.