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

Absolute positioning--what am I missing

P: n/a
What am I not understanding about the definition of { position: absolute; }?

"The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify offsets
with respect to the box's containing block."

Please take a look at http://gavelcade.com/abspos.html and help me
understand why my nested, absolutely positioned divs are being positioned
with respect to the page rather than to their containing block, in IE6,
Mozilla, AND Opera. The result is the same whether or not the headers are
wrapped in their own div.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jul 20 '05 #1
Share this Question
Share on Google+
14 Replies


P: n/a


Harlan Messinger wrote:
What am I not understanding about the definition of { position: absolute; }?

"The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify offsets
with respect to the box's containing block."

Please take a look at http://gavelcade.com/abspos.html and help me
understand why my nested, absolutely positioned divs are being positioned
with respect to the page rather than to their containing block, in IE6,
Mozilla, AND Opera. The result is the same whether or not the headers are
wrapped in their own div.


Read section 9.8.4 Absolute positioning, it clearly states:
The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial containing
block, as in our example).
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2

P: n/a

"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:40***********************@newsread4.arcor-online.net...


Harlan Messinger wrote:
What am I not understanding about the definition of { position: absolute; }?
"The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block."

Please take a look at http://gavelcade.com/abspos.html and help me
understand why my nested, absolutely positioned divs are being positioned with respect to the page rather than to their containing block, in IE6,
Mozilla, AND Opera. The result is the same whether or not the headers are wrapped in their own div.


Read section 9.8.4 Absolute positioning, it clearly states:
The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial containing
block, as in our example).


I see. The problem is that it didn't occur to me to look for a definition
for something that looked like perfectly clear English as it was. :-)
"Containing block" looks pretty unambiguous to me!

Now that I know this, it strikes me as *extremely* unfortunate. I thought it
enabled one to build reusable, repeatable sections of a page, an specify
identical layouts (at the pixel level) for all of them. Each would be
defined by a statically positioned parent block occurring in the normal page
flow. Each parent block would be filled with child blocks positioned
absolutely *with respect to their parent*, with the positioning parameters
based on their classes. Each child block would be of the *same* class as the
corresponding children of the other parents.

So this isn't possible, or is there another way to do it?

Jul 20 '05 #3

P: n/a

Good evening Harlan,
It was foretold that on 30-1-2004 @ 13:29:14 GMT-0500 (which was
19:29:14 where I live) Harlan Messinger would mumble:

<snipped a bit>

HM> Each parent block would be filled with child blocks positioned
HM> absolutely *with respect to their parent*,
HM> So this isn't possible, or is there another way to do it?

If i understand you correctly, you want the parent element to be the
containing block of the AP element?

You might try setting "position: relative" with no offsets to the
element you want to use as an CB, but don't shoot me if it doesn't
work: just guessing here.

--
Best regards,
lukie

--------------------------------------------
Powered by The Bat! version 1.63 Beta/7 with Windows 2000 (build
2195), version 5.0 Service Pack 4 and using the best browser: Opera.

"In California, 50 women protested the impending war with Iraq by
lying on the ground naked and spelling out the word 'peace.' Right
idea, wrong president." - Jay Leno
--------------------------------------------
__________________________________________________ ______________________
Delivered using the Free Personal Edition of Mailtraq (www.mailtraq.com)
Jul 20 '05 #4

P: n/a
"Harlan Messinger" <h.*********@comcast.net> wrote:
"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:40***********************@newsread4.arcor-online.net...

Read section 9.8.4 Absolute positioning, it clearly states:
The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial containing
block, as in our example).


I see. The problem is that it didn't occur to me to look for a definition
for something that looked like perfectly clear English as it was. :-)
"Containing block" looks pretty unambiguous to me!

Now that I know this, it strikes me as *extremely* unfortunate. I thought it
enabled one to build reusable, repeatable sections of a page, an specify
identical layouts (at the pixel level) for all of them. Each would be
defined by a statically positioned parent block occurring in the normal page
flow. Each parent block would be filled with child blocks positioned
absolutely *with respect to their parent*, with the positioning parameters
based on their classes. Each child block would be of the *same* class as the
corresponding children of the other parents.

So this isn't possible, or is there another way to do it?


Just add position: relative; to the styles for the parent element. A
relatively positioned element with no top, left, right or bottom
values will occupy exactly the same position as a statically
positioned element. All absolutely positioned children will now be
positioned relative to that parent rather than to the page.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #5

P: n/a

"Steve Pugh" <st***@pugh.net> wrote in message
news:ce********************************@4ax.com...
"Harlan Messinger" <h.*********@comcast.net> wrote:
"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:40***********************@newsread4.arcor-online.net...

Read section 9.8.4 Absolute positioning, it clearly states:
The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial containing
block, as in our example).


I see. The problem is that it didn't occur to me to look for a definition
for something that looked like perfectly clear English as it was. :-)
"Containing block" looks pretty unambiguous to me!

Now that I know this, it strikes me as *extremely* unfortunate. I thought itenabled one to build reusable, repeatable sections of a page, an specify
identical layouts (at the pixel level) for all of them. Each would be
defined by a statically positioned parent block occurring in the normal pageflow. Each parent block would be filled with child blocks positioned
absolutely *with respect to their parent*, with the positioning parametersbased on their classes. Each child block would be of the *same* class as thecorresponding children of the other parents.

So this isn't possible, or is there another way to do it?


Just add position: relative; to the styles for the parent element. A
relatively positioned element with no top, left, right or bottom
values will occupy exactly the same position as a statically
positioned element. All absolutely positioned children will now be
positioned relative to that parent rather than to the page.


Aha. It works. But relative positioning isn't absolute positioning, so I'm
left puzzled by how, given the definition of "containing block", this turns
the parent div into a containing block.

Jul 20 '05 #6

P: n/a
"Harlan Messinger" <h.*********@comcast.net> wrote:
"Steve Pugh" <st***@pugh.net> wrote in message
news:ce********************************@4ax.com.. .

Just add position: relative; to the styles for the parent element.


Aha. It works. But relative positioning isn't absolute positioning, so I'm
left puzzled by how, given the definition of "containing block", this turns
the parent div into a containing block.


This definition:
"The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial
containing block, as in our example)."

It says the nearest positioned block (which means the nearest block
with position set to anything other than static) not the nearest
absolutely positioned block.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7

P: n/a

"Steve Pugh" <st***@pugh.net> wrote in message
news:95********************************@4ax.com...
"Harlan Messinger" <h.*********@comcast.net> wrote:
"Steve Pugh" <st***@pugh.net> wrote in message
news:ce********************************@4ax.com.. .

Just add position: relative; to the styles for the parent element.


Aha. It works. But relative positioning isn't absolute positioning, so I'mleft puzzled by how, given the definition of "containing block", this turnsthe parent div into a containing block.


This definition:
"The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial
containing block, as in our example)."

It says the nearest positioned block (which means the nearest block
with position set to anything other than static) not the nearest
absolutely positioned block.


Oh, OK, I see. That's the mistake I was making. Thanks.

Jul 20 '05 #8

P: n/a
Harlan Messinger wrote:

I thought it
enabled one to build reusable, repeatable sections of a page, an specify
identical layouts (at the pixel level) for all of them.


FYI, you cannot get pixel-precision unless perhaps you are dealing only
with graphics (and your visitors always enable image loading). It
cannot work reliably with text elements, since you have no control over
the visitor's fonts or text size.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.
Jul 20 '05 #9

P: n/a
"Harlan Messinger" <h.*********@comcast.net> wrote:

"Steve Pugh" <st***@pugh.net> wrote in message
news:95********************************@4ax.com.. .
"Harlan Messinger" <h.*********@comcast.net> wrote:
>"Steve Pugh" <st***@pugh.net> wrote in message
>news:ce********************************@4ax.com.. .

>> Just add position: relative; to the styles for the parent element.
>
>Aha. It works. But relative positioning isn't absolute positioning, soI'm >left puzzled by how, given the definition of "containing block", thisturns >the parent div into a containing block.


This definition:
"The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial
containing block, as in our example)."

It says the nearest positioned block (which means the nearest block
with position set to anything other than static) not the nearest
absolutely positioned block.


Oh, OK, I see. That's the mistake I was making. Thanks.


Well, then, any ideas why they didn't just define the positioning of
absolutely positioned items to be relative to their parent,
*regardless* of the positioning of the parent? I don't see the benefit
of positioning a block relative to anything *but* its parent. If I
wanted it positioned relative to another block, wouldn't I just have
put it into that other block?

Just now I thought of one possible reason, but I wonder if that's the
W3C's reason. Maybe it's supposed to allow text to be positioned out
of its logical sequence on the visual page, in cases where other
visual cues establish the reading order for visual users (such as a
case where banner-sized text is naturally read first even if it's not
positioned at the upper left), while leaving the text flow in its
natural order in the page's source.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Jul 20 '05 #10

P: n/a
kchayka <kc*********@sihope.com> wrote:
Harlan Messinger wrote:

I thought it
enabled one to build reusable, repeatable sections of a page, an specify
identical layouts (at the pixel level) for all of them.
FYI, you cannot get pixel-precision unless perhaps you are dealing only
with graphics (and your visitors always enable image loading).


True, with text you would have no control over where lines wrap or
even on the heights of the containing blocks, but you'd have control
over their left and right positions and their widths. I shouldn't have
said "pixel-precision" without qualifying it.
It
cannot work reliably with text elements, since you have no control over
the visitor's fonts or text size.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Jul 20 '05 #11

P: n/a
Harlan Messinger wrote:

any ideas why they didn't just define the positioning of absolutely
positioned items to be relative to their parent, *regardless* of
the positioning of the parent? I don't see the benefit of
positioning a block relative to anything *but* its parent. If I
wanted it positioned relative to another block, wouldn't I just
have put it into that other block?

Maybe it's supposed to allow text to be positioned out of its
logical sequence on the visual page,


I don't know for sure, but that seems to make the most sense. As one
example, it allows an author to take a nested div and position it with
respect to the browser window, while leaving the other content of the
parent div to flow normally.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #12

P: n/a
DU
Harlan Messinger wrote:
"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:40***********************@newsread4.arcor-online.net...

Harlan Messinger wrote:

What am I not understanding about the definition of { position:
absolute; }?
"The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify
offsets
with respect to the box's containing block."

Please take a look at http://gavelcade.com/abspos.html and help me
understand why my nested, absolutely positioned divs are being
positioned
with respect to the page rather than to their containing block, in IE6,
Mozilla, AND Opera. The result is the same whether or not the headers
are
wrapped in their own div.


Read section 9.8.4 Absolute positioning, it clearly states:
The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial containing
block, as in our example).

I see. The problem is that it didn't occur to me to look for a definition
for something that looked like perfectly clear English as it was. :-)
"Containing block" looks pretty unambiguous to me!

Now that I know this, it strikes me as *extremely* unfortunate. I thought it
enabled one to build reusable, repeatable sections of a page, an specify
identical layouts (at the pixel level) for all of them. Each would be
defined by a statically positioned parent block occurring in the normal page
flow. Each parent block would be filled with child blocks positioned
absolutely *with respect to their parent*, with the positioning parameters
based on their classes. Each child block would be of the *same* class as the
corresponding children of the other parents.

So this isn't possible, or is there another way to do it?

Set the parent style to:
style="position:relative; ..." and do not set top or left or right or
bottom values to that parent element (otherwise set these to auto).
For any easy testing of this:

Interactive demo on CSS positionning
http://www10.brinkster.com/doctorunc...sitioning.html

where your parent could be either the blue or yellow div while your
child is the red one.

DU
Jul 20 '05 #13

P: n/a
DU
kchayka wrote:
Harlan Messinger wrote:
I thought it
enabled one to build reusable, repeatable sections of a page, an specify
identical layouts (at the pixel level) for all of them.

FYI, you cannot get pixel-precision unless perhaps you are dealing only
with graphics (and your visitors always enable image loading). It
cannot work reliably with text elements, since you have no control over
the visitor's fonts or text size.


I disagree... unless the page is excessively complex and/or targeted
browsers CSS support/compliance is poor/buggy. Text elements' font size,
font family, etc... are pretty much irrelevant. If such text is within
an element, block-level or inline, then such element's will be
positionable accurately (via their top, left, bottom and/or right offsets).

DU
Jul 20 '05 #14

P: n/a
Harlan Messinger <hm*******************@comcast.net> wrote in message news:<hg********************************@4ax.com>. ..
kchayka <kc*********@sihope.com> wrote:
Harlan Messinger wrote:

I thought it
enabled one to build reusable, repeatable sections of a page, an specify
identical layouts (at the pixel level) for all of them.


FYI, you cannot get pixel-precision unless perhaps you are dealing only
with graphics (and your visitors always enable image loading).


True, with text you would have no control over where lines wrap or
even on the heights of the containing blocks, but you'd have control
over their left and right positions and their widths. I shouldn't have
said "pixel-precision" without qualifying it.
It
cannot work reliably with text elements, since you have no control over
the visitor's fonts or text size.


Don't know if it's relevant but I use the margin-top, margin-left
properties to position elements - the containing box requires a
vertical-align:top and text-align:left bias. Don't use the other
margin properties though - they're unreliable.
Jul 20 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.