Problem with position: fixed, div is not really where it should be
THE PROBLEM IS SOLVED: I specified right: 0px instead of top: 0px...
I have a problem with CSS' position: fixed; both in Firefox (6.0.2), Chromium (12.0.742.112) and Konqueror (4.6.2). Consider the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric开发者_Python百科t.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<body>
<div style="background: grey; position: fixed; left: 0px; right: 0px; width: 100%; height: 100%;">
...
</div>
<div id="page2" style="margin: 50px;">
test
</div>
</body>
</html>
My aim is that the first <div> is concealing the whole viewport, but in all three browsers, it does not occludes the topmost 50+x pixels -- which is exactly the top margin of the second <div>. Can anyone tell me what the problem is and how I can fix this without dirty hacks?
Note that inserting any text between the first and the second <div> decreases the problem in the sense that only the topmost x picels are not occluded, which also can be removed by adding style="margin: 0px;" to the <body> tag. The result of the above sample code as well as the version with an "x" added between the two <div>'s in Konqueror can be seen
here:
Thanks a lot in advance!
You have not specified top: 0 on the fixed-position div. Why not?
加载中,请稍侯......
精彩评论