By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,203 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

absolute positioning

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.