473,396 Members | 1,846 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Absolute positioning--what am I missing

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
14 2446


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

"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

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
"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

"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
"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

"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
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
"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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
by: Nick K. | last post by:
I recently began maintenance work on a production web server that is located in the root directory of a web server. I moved this into a sub web on my local web server in order to do work on it. I...
7
by: Tintax | last post by:
I'm trying to get a child DIV tag to overlap the border of it's parent DIV tag in order to create an effect as follows: +----------------------------------------------------------+ | ...
6
by: Quiet Desperation | last post by:
I started with this: #section { position: relative; width: 100%; } and
3
by: Alexander Fischer | last post by:
Hello everybody, can someone help me with this problem: I'm creating a page with a sidebar, and I wanted to create the sidebar as a div which gets a "position:absolute". The problem: if the...
8
by: TJ Walls | last post by:
Hello All, I am fairly new to html authoring and have run into a strange problem. I have a simple GIF file that is a black horizontal line. As a test start I am trying to display it twice with...
7
by: Rizaan Jappie | last post by:
is it possible to get the relative path based on a absolute path in c#? *** Sent via Developersdex http://www.developersdex.com *** Don't just participate in USENET...get rewarded for it!
3
by: andrew | last post by:
Hi there, I've fought with this problem before in IE and "solved" it by setting various block elements to have 100% width, but now that won't work for me and I'm just curious in general as to...
19
by: pamelafluente | last post by:
Hi Guys, I am trying to include my little script in my html report. I have done an external JS file which contains it. If you remember, you have helped me to detect if the asp page was present...
2
by: markszlazak | last post by:
Could someone check out the following code and please help me understand the problem and fix it. It seems like some events are not firing when my mouse moves over the table cells to quickly causing...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.