In a big project, few buttons were misalligned in IE. I found a fix by coincidence, by setting position: absolute
without any parameters. It made me wonder, what are the default values of such position? I understand how absolute positioning works and what containing element means. But I don't know where the default values come from. They are definitely not top:0; left:0
which I originally expected.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
position:absolute;
}
</style>
</head>
<body>
<h1>Absoulute pos</h1>
<p>Paragraph</p>
</body>
</html>
Here is a simple page, and this is how final positioning of the h1 element looks like:
Best Answer
As you suspect, the initial values for all these properties is not
0
; it isauto
. You can find their property definitions in section 9.3.2 of the spec.When an absolutely positioned box keeps all its offsets
auto
(i.e. you don't modify them), it doesn't go anywhere. It remains in the static position, which basically means its usual spot in the layout had it not been positioned at all. Section 10 has all the details (it even has entire paragraphs explaining what "static position" means), but you'll want to focus on 10.3.7:And 10.6.4: