Closed
Bug 274902
Opened 21 years ago
Closed 21 years ago
Incorrect handling of absolute position in static block elements
Categories
(Core :: Layout, defect)
Tracking
()
VERIFIED
INVALID
People
(Reporter: richard.jonas, Unassigned)
Details
This bug is related to the absolute positioned divs in a statically positioned
containing box generated by a parent div. The bug can be reproducible by the
following html page:
<html>
<head>
<style type="text/css">
#content {
position: relative;
border: 1px solid black;
margin: 5px;
}
#labels {
position: relative;
border: 1px solid blue;
}
#values {
position: absolute;
top: 0px;
left: 50%;
border: 1px solid red;
}
#sibling {
position: static;
}
</style>
</head>
<body>
<div id="content">
<div id="labels">
<div class="label">Label #1:</div>
<div class="label">Label #2:</div>
</div>
<div id="values">
<div class="value">Value #1</div>
<div class="value">Value #2</div>
</div>
<div id="sibling">
<form name="formname" style="position: absolute; top: 5px; right: 10px;">
<input type="button" value="Button #1">
</form>
</div>
</div>
</body>
</html>
The 'labels' div is positioned in relative mode, and the div identified by
'sibling' is a normal div, which has the default position value (static,
according to the CSS 2 spec.). This can be checked by
window.getComputedStyle(document.getElementById('sibling'),
null).getPropertyValue('position')
The form called 'formname' is positioned absolutely to its containing block
('sibling' div). But because of this bug the form is positioned to the
containing box of 'content' div.
According to the CSS 2 spec., static means:
The box is a normal box, laid out according to the normal flow. The 'left'
and 'top' properties do not apply.
and div is a block level element, so:
Block-level elements generate a principal block box that only contains block
boxes. The principal block box establishes the containing block for descendant
boxes and generated content and is also the box involved in any positioning scheme.
Consequently the containing box of form should be the box generated by div
'sibling'.
Workaround:
#sibling {
position: relative;
}
which is not the default value, so you can set it manually.
|
||
Updated•21 years ago
|
Assignee: firefox → nobody
Component: General → Layout
Product: Firefox → Core
QA Contact: firefox.general → core.layout
Version: 1.0 Branch → Other Branch
|
||
Comment 1•21 years ago
|
||
From http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
"If the element has 'position: absolute', the containing block is established by
the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in
the following way..."
->INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 21 years ago
Resolution: --- → INVALID
|
||
Updated•21 years ago
|
Status: RESOLVED → VERIFIED
You need to log in
before you can comment on or make changes to this bug.
Description
•