473,763 Members | 1,882 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

position:absolu te relative to parent or to window?

Hello,

as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
absolute positioned block element is positioned relative to its parent
element. This is told in the german selfhtml reference, too:
http://de.selfhtml.org/navigation/cs...positionierung

In fact firefox and konqueror do position the block relativ to the window
border. This is explained here, too:
http://www.w3schools.com/dhtml/dhtml_css.asp

Which behaviour is correct?

Here is an example:

<html>
<head>
<style type="text/css">
#header { height: 44px;
border: 1px solid black;}

#copyright { border: 1px solid green;
position: absolute;
right: 12px;
bottom: 0px; }

</style>
</head>

<body>
<div id="header">
<div id="copyright" >
blah foo text
</div>
</div>
</body>
</html>

--
Jul 27 '05 #1
6 18836
Gert Brinkmann wrote:
as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
absolute positioned block element is positioned relative to its parent
element.
No, to its containing block, which is defined as the nearest ancestor
element which has a position property with a value other than "static". If
there is no such element then it is from the edges of the viewport.
In fact firefox and konqueror do position the block relativ to the window
border.
Only if there isn't a containing block ... and you don't have any toolbars
or menu bars in your window.
This is explained here, too:
http://www.w3schools.com/dhtml/dhtml_css.asp


W3Schools - wrong again.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 27 '05 #2
David Dorward wrote:
Gert Brinkmann wrote:
as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
absolute positioned block element is positioned relative to its parent
element.


No, to its containing block, which is defined as the nearest ancestor
element which has a position property with a value other than "static". If
there is no such element then it is from the edges of the viewport.


Thank you very much for your answer. It's unbelievable, but it is true. This
is the way, firefox behaves (I did not check other browsers). Hmm, does
this behaviour make sense? But ok, this is not the question here.

Thanks again,

Gert

Jul 28 '05 #3
>>
No, to its containing block, which is defined as the nearest ancestor
element which has a position property with a value other than "static". If
there is no such element then it is from the edges of the viewport.


Thank you very much for your answer. It's unbelievable, but it is true. [...]

Why is it unbelievable? It provides a way to position:absolu te in any
containing block.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 28 '05 #4
Jim Moe wrote:
Why is it unbelievable? It provides a way to position:absolu te in any
containing block.


Certainly yes, but IMHO it is not very intuitive. If you lay out a DIV
containing a lot of styled HTML, I do not like that the content changes
layout if you change the placing of the DIV. But perhaps I first have to
internalise(?) this technique.

Gert

Jul 29 '05 #5
Gert Brinkmann wrote :
David Dorward wrote:

Gert Brinkmann wrote:

as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
absolute positioned block element is positioned relative to its parent
element.


No, to its containing block, which is defined as the nearest ancestor
element which has a position property with a value other than "static". If
there is no such element then it is from the edges of the viewport.

Thank you very much for your answer. It's unbelievable, but it is true. This
is the way, firefox behaves (I did not check other browsers). Hmm, does
this behaviour make sense? But ok, this is not the question here.

Thanks again,

Gert


I personally reported this bug at Opera some 30 months ago when Opera
7.0 beta 1 came out. I also reported the problem, that precise bug to
MSIE 7 dev. team too.

"percentage width value on absolutely positioned elements should
calculate the %tage of the containing block, not %tage of the immediate
parent node of the abs. pos. elements. Safari 1.x and Mozilla-based
browsers supports this correctly (...)"
http://channel9.msdn.com/wiki/defaul...rSupportforCSS

FYI, Opera 6.06 did not have that bug: it was positioning an abs. pos.
element regarding its positioned ancestor otherwise relative to the
viewport dimension.

Gérard
--
remove blah to email me
Jul 29 '05 #6
Gert Brinkmann wrote:
Jim Moe wrote:
Why is it unbelievable? It provides a way to position:absolu te in any
containing block.


Certainly yes, but IMHO it is not very intuitive. If you lay out a DIV
containing a lot of styled HTML, I do not like that the content changes
layout if you change the placing of the DIV. But perhaps I first have to
internalise(?) this technique.


See it this way:

If you have

<div class="a">
..
<div class="b">..</div>
..
</div>

and div.b should be positioned relative to div.a, you don't want the layout
to change, if you insert (for semantic reasons) another level inbetween:

<div class="a">
..
<div>
<div class="b">..</div>
</div>
..
</div>

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/
Jul 29 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2856
by: Mike | last post by:
I've been working on a pop-up menu, one of those where you mouse over a button and a submenu pops up. Because the client wanted the menu centered, I gave the starting point of the submenu an absolute position, then used relative position to place the menu where I want it beneath the buttons. The code for the menu is posted below (in Javascript). Although I can't get this to happen on my computer (using IE5.0, 5.5, and Netscape 7.0), the...
3
8512
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 sidebar's content is longer than the main content, my IE6 will not create a vertical scrollbar for the page, which makes the lower part of the sidebar unreadable. Take this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
6
4874
by: Harald Kirsch | last post by:
In the W3C document about CSS2, I read at http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position the following: absolute The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties
3
19782
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following test case element1 and element2 should be placed side by side inside a centered white container element: http://www.markusernst.ch/test.htm
4
3146
by: Peter Pfannenschmid | last post by:
Hello experts, I would be very grateful if you would have a look at the following URL: http://www.omeganet.de/test.html The html file and the associated style have been validated successfully by the online validators of w3.org.
2
6439
by: Joachim Bauer | last post by:
I'm using the code below to display a menu that opens when the mouse goes over the main menu item (try it in your browser to understand the behaviour). It uses "position:absolute" and a switch between "display='none'" and "display=''". However the problem is that - in Internet Explorer 6 the dropdown (<select>...) always hides the menu
6
7583
by: alex | last post by:
I'm playing around with css popups a la http://www.meyerweb.com/eric/css/edge/popups/demo.html for here: http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html (css) http://www.redbrick.dcu.ie/~alex/golf/css/golf-main.css
19
60388
by: derelicten | last post by:
hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of pics is bigger then fixed space. SO I put them in a position:absolute div and I gave a position:relative to the container td. This seems to work in IE but in Firefox position is relative to the browser window, not the cell. I need a compatible solution...
6
2885
by: ThunderMusic | last post by:
Hi, I think the subject says it all... thanks ThunderMusic
0
9389
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9943
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9828
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8825
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7370
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6643
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5410
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3918
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3529
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.