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

position: relative

P: n/a
According to my book on CSS, if you apply 'position: relative' to a
block-level element, it will stay exactly where it is. However, you can
then use top, left etc. to offset the element relative to its position.

However, looking at other people's stylesheets, I often see 'position:
relative' applied to elements but without the use of top, left etc.,
which makes me think using 'position: relative' has some other effect
that my book has not made clear.

For example, in this site's stylesheet

http://www.blue-sky.co.uk/

at

http://www.blue-sky.co.uk/main.css

#navbar has 'position: relative' but to what end? Does 'position:
relative' have a bearing on the absolutely positioned descendents of
#navbar?

Can anyone throw some light on this?
Dec 8 '07 #1
Share this Question
Share on Google+
10 Replies


P: n/a
Mark wrote:
According to my book on CSS, if you apply 'position: relative' to a
block-level element, it will stay exactly where it is. However, you can
then use top, left etc. to offset the element relative to its position.

However, looking at other people's stylesheets, I often see 'position:
relative' applied to elements but without the use of top, left etc.,
which makes me think using 'position: relative' has some other effect
that my book has not made clear.

For example, in this site's stylesheet

http://www.blue-sky.co.uk/

at

http://www.blue-sky.co.uk/main.css

#navbar has 'position: relative' but to what end? Does 'position:
relative' have a bearing on the absolutely positioned descendents of
#navbar?

Can anyone throw some light on this?
http://www.quirksmode.org/css/position.html
CSS tests - The position declaration

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Dec 8 '07 #2

P: n/a
Mark wrote:
>
However, looking at other people's stylesheets, I often see 'position:
relative' applied to elements but without the use of top, left etc.,
which makes me think using 'position: relative' has some other effect
that my book has not made clear.
http://brainjar.com/css/positioning/default2.asp

Read through Descendant Positioning

--
Berg
Dec 8 '07 #3

P: n/a
On 8 déc, 11:51, Mark <u...@example.netwrote:
According to my book on CSS, if you apply 'position: relative' to a
block-level element, it will stay exactly where it is. However, you can
then use top, left etc. to offset the element relative to its position.

However, looking at other people's stylesheets, I often see 'position:
relative' applied to elements but without the use of top, left etc.,

Hello Mark,

Then left value is auto and top value is auto. The initial and default
value of top, left, right and bottom is auto according to CSS 2.x
which makes me think using 'position: relative' has some other effect
that my book has not made clear.

For example, in this site's stylesheet

http://www.blue-sky.co.uk/

at

http://www.blue-sky.co.uk/main.css

#navbar has 'position: relative' but to what end? Does 'position:
relative' have a bearing on the absolutely positioned descendents of
#navbar?
Yes it should. Absolutely.

Your webpage has many other problems. Under MSIE 7, the text size can
not be increased. Some links are blue on a blue background. You use
136 lines of detection for displaying Flash but you underestimate
people who turn off Flash content. Your menu also triggers script
errors and script debugger in MSIE 7. In part this is because you
attach event handlers dynamically as the window is created and not as
the elements are completely loaded into the body element. Anyway, why
attach the handlers dynamically. Why resort to script for the nested
lists anyway?

*html #content {
margin: 10px 0 0 225px;
}
generates a parsing error.
There are *_many_* other things that are clearly wrong or incorrect in
your webpage, and in particular in your main.css

Gérard
Dec 8 '07 #4

P: n/a
http://www.blue-sky.co.uk/main.css

#navbar has 'position: relative' but to what end? Does 'position:
relative' have a bearing on the absolutely positioned descendents of
#navbar?
My understanding:

Block elements declared as relative or absolute, position themselves
relative to the closest enclosing element that is not statically
positioned.

So, if div-a is relative and encloses div-b, where div-b has
left, right top or bottom adjustments, means div-b will be
adjusted relative to div-a, rather than the body or some other
div that encloses div-a.

So, declaring div-a as relative may have more to do with positioning
its DOM children, than about positioning itself.
Dec 8 '07 #5

P: n/a
Jonathan N. Little wrote:
Mark wrote:
>According to my book on CSS, if you apply 'position: relative' to a
block-level element, it will stay exactly where it is. However, you
can then use top, left etc. to offset the element relative to its
position.

However, looking at other people's stylesheets, I often see 'position:
relative' applied to elements but without the use of top, left etc.,
which makes me think using 'position: relative' has some other effect
that my book has not made clear.

For example, in this site's stylesheet

http://www.blue-sky.co.uk/

at

http://www.blue-sky.co.uk/main.css

#navbar has 'position: relative' but to what end? Does 'position:
relative' have a bearing on the absolutely positioned descendents of
#navbar?

Can anyone throw some light on this?

http://www.quirksmode.org/css/position.html
CSS tests - The position declaration
Great link. Thanks.
Dec 9 '07 #6

P: n/a
In article <cc***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@centralva.netwrote:
Mark wrote:
According to my book on CSS, if you apply 'position: relative' to a
block-level element, it will stay exactly where it is. However, you can
then use top, left etc. to offset the element relative to its position.

However, looking at other people's stylesheets, I often see 'position:
relative' applied to elements but without the use of top, left etc.,
which makes me think using 'position: relative' has some other effect
that my book has not made clear.

For example, in this site's stylesheet

http://www.blue-sky.co.uk/

at

http://www.blue-sky.co.uk/main.css

#navbar has 'position: relative' but to what end? Does 'position:
relative' have a bearing on the absolutely positioned descendents of
#navbar?

Can anyone throw some light on this?

http://www.quirksmode.org/css/position.html
CSS tests - The position declaration
I guess op's focus should go to the words:

"By themselves, relatively positioned elements are uninteresting,
since you almost never want to skew an element by a few pixels.
However, a relatively positioned element serves as a containing
block; and this is the usual reason to use position: relative."

OP can also look at:

http://snook.ca/archives/html_and_cs...ive_overflow_i
e/

(where, btw, the author says if this article has been helpful to
you, please consider leaving a donation. Consider 10% to me for
pointing it out. This is a kind of relative positioning of money).

Here is one example to show how it acts to keep an absolutely
positioned element inside another element:

http://netweaver.com.au/alt/positionRelative.html

You need to look about and collect your own material on how
useful it is. These above things might help you. I am sure there
are other things others will tell you about. I kind of doubt that
anything big and general and simple exists on this which would
help you enormously.

--
dorayme
Dec 9 '07 #7

P: n/a
On 2007-12-08, salmobytes <Sa***************@gmail.comwrote:
>
>http://www.blue-sky.co.uk/main.css

#navbar has 'position: relative' but to what end? Does 'position:
relative' have a bearing on the absolutely positioned descendents of
#navbar?

My understanding:

Block elements declared as relative or absolute, position themselves
relative to the closest enclosing element that is not statically
positioned.
Almost. Relatively-positioned elements (block or not) have just the same
containing blocks as static ones-- i.e. just the nearest block ancestor.

It's only absolutely positioned ones whose CB is the nearest absolute or
fixed ancestor.
Dec 10 '07 #8

P: n/a
On Dec 10, 3:30 pm, Ben C <spams...@spam.eggswrote:
Almost. Relatively-positioned elements (block or not) have just the same
containing blocks as static ones-- i.e. just the nearest block ancestor.

It's only absolutely positioned ones whose CB is the nearest absolute or
fixed ancestor.
Ok. That makes more sense. I'll have to learn to keep
my participation to questions only. I seem to know enough to get
it almost right. Which is perhaps worse than wrong.

Dec 11 '07 #9

P: n/a
On 2007-12-11, salmobytes <Sa***************@gmail.comwrote:
On Dec 10, 3:30 pm, Ben C <spams...@spam.eggswrote:
>Almost. Relatively-positioned elements (block or not) have just the same
containing blocks as static ones-- i.e. just the nearest block ancestor.

It's only absolutely positioned ones whose CB is the nearest absolute or
fixed ancestor.

Ok. That makes more sense. I'll have to learn to keep
my participation to questions only. I seem to know enough to get
it almost right. Which is perhaps worse than wrong.
Don't worry about it. If you say something wrong then it might get
corrected and then it effectively might as well have been a question.
Better still perhaps one about something you didn't know you didn't
know.

The only difference is in the number of kickings you might receive, but
they are harmless fun you should ignore anyway.
Dec 11 '07 #10

P: n/a
Ben C wrote:
On 2007-12-11, salmobytes <Sa***************@gmail.comwrote:
>On Dec 10, 3:30 pm, Ben C <spams...@spam.eggswrote:
>>Almost. Relatively-positioned elements (block or not) have just the same
containing blocks as static ones-- i.e. just the nearest block ancestor.

It's only absolutely positioned ones whose CB is the nearest absolute or
fixed ancestor.
Ok. That makes more sense. I'll have to learn to keep
my participation to questions only. I seem to know enough to get
it almost right. Which is perhaps worse than wrong.

Don't worry about it. If you say something wrong then it might get
corrected and then it effectively might as well have been a question.
Better still perhaps one about something you didn't know you didn't
know.

The only difference is in the number of kickings you might receive, but
they are harmless fun you should ignore anyway.
Hey but you got to admit that for most of us the right-good-kicking is
an effective educational tool. You remember the lesson!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Dec 11 '07 #11

This discussion thread is closed

Replies have been disabled for this discussion.