Problem with position: fixed, div is not really where it should be_问答_开发者

Problem with position: fixed, div is not really where it should be

开发者 https://www.devze.com 2023-04-06 20:49 出处：网络

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

相关专题：css xhtml

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:

Problem with position: fixed, div is not really where it should be