I've done some reading into the standards for absolute positioning and have never found a satisfactory (blatant) explaination of how widths are calculated for absolutely positioned elements. Consider the following code:
<style type=...">
#left, #right {
float: left;
width: 100px;
height: 100px;
}
#absolutely {
position: absolute;
width: 50%;
height: 20%;
}
</style>
.
.
.
<body>
<div id="left"> </div>
<div id="right">
<div id="absolutely"> </div>
</div>
Assuming all markup is present to force browsers into standards mode: Is the width of the "absolutely" DIV 50 pixels and the height 20 pixels according to the standards? Or is the width and height taken in reference to the browser viewport, and only the default position is inhereted from its parent?
From the browser implementation that I've seen, the widths and heights of absolutely positioned elements are also taken in reference to their parent element. Is that correct?I believe not. All absolutely positioned elements' attributes are relative to the window, unless you add position: relative; to the absolutely positioned <div>'s parent element.
Now, don't get me wrong, I am not totally sure, but I did a li'l test, which confirmed this, along with something I recall someone else saying in another forum. I may be completely wrong, so... bummer.
Try it out.
<style type="text/css">
/*<![CDATA[*/
#left, #right {
width: 100px;
height:100px;
float: left;
border: 1px solid #000;
}
#absolute {
position: absolute;
width: 50%;
height: 20%;
border: 1px solid #000;
}
/*]]>*/
</style>
.
.
.
.
<div id="right"> </div>
<div id="left">
<div id="absolute"> </div>
</div>
See what happens.
***EDIT***
AHA! I did a bit more testing, and it seems this method does not work in Netscape.
Now, the logic behind this seems sound. Since absolutely positioned elements are taken out of the document's normal flow. How would one element know the absolutely positioned one is there, when it is not in the same flow as the absolutely positioned one? I haven't a clue what adding position: relative; to the parent element does, but it seems to work in most cases.
This is a very interesting thing, I'm curious to find out what is true, or what is not.
Doesn't work in Opera, either. The width of the absolutely positioned element is half of it's parent element, but the height is 20% of the viewport.
<style type=...">
#left, #right {
float: left;
width: 100px;
height: 100px;
}
#absolutely {
position: absolute;
width: 50%;
height: 20%;
}
</style>
.
.
.
<body>
<div id="left"> </div>
<div id="right">
<div id="absolutely"> </div>
</div>
Assuming all markup is present to force browsers into standards mode: Is the width of the "absolutely" DIV 50 pixels and the height 20 pixels according to the standards? Or is the width and height taken in reference to the browser viewport, and only the default position is inhereted from its parent?
From the browser implementation that I've seen, the widths and heights of absolutely positioned elements are also taken in reference to their parent element. Is that correct?I believe not. All absolutely positioned elements' attributes are relative to the window, unless you add position: relative; to the absolutely positioned <div>'s parent element.
Now, don't get me wrong, I am not totally sure, but I did a li'l test, which confirmed this, along with something I recall someone else saying in another forum. I may be completely wrong, so... bummer.
Try it out.
<style type="text/css">
/*<![CDATA[*/
#left, #right {
width: 100px;
height:100px;
float: left;
border: 1px solid #000;
}
#absolute {
position: absolute;
width: 50%;
height: 20%;
border: 1px solid #000;
}
/*]]>*/
</style>
.
.
.
.
<div id="right"> </div>
<div id="left">
<div id="absolute"> </div>
</div>
See what happens.
***EDIT***
AHA! I did a bit more testing, and it seems this method does not work in Netscape.
Now, the logic behind this seems sound. Since absolutely positioned elements are taken out of the document's normal flow. How would one element know the absolutely positioned one is there, when it is not in the same flow as the absolutely positioned one? I haven't a clue what adding position: relative; to the parent element does, but it seems to work in most cases.
This is a very interesting thing, I'm curious to find out what is true, or what is not.
Doesn't work in Opera, either. The width of the absolutely positioned element is half of it's parent element, but the height is 20% of the viewport.