position: relative, inline VS .css-file (IE7)

<body> position: relative, inline VS .css-file (IE7)

问题

Im experiencing some really wierd behaviour in IE7. I want to position my <body> -tag relative.

If i type

body { position: relative; }

in my css file, my menu (which is position: absolute) doesn't work. But if i use

<body style="position: relative;">

It works. How can that possibly make a difference? There is not javascript that is removing the css attribute or something like that.

回答1:

Was curious about this, but as the question stands @thirtydot's comment seems to be correct: the answer is that there is no difference. I've created this jsfiddle which renders as expected in IE7 (to be completely honest: I tested it with IE7 mode in IE9).

Here's the code:

<html><head></head>
    <body>
        <div class="menu">HOME | PRODUCTS | ABOUT</div>
        <p>Testing!</p><p>Testing!</p><p>Testing!</p><p>Testing!</p>
    </body>
</html>

The relevant CSS, with a few colors to visualize things:

html {
    background-color: green;
}

div.menu {
    border: 1px solid blue;
    background-color: silver;
    position: absolute;
    right: 10px;
    top: 10px;
}

body {
    background-color: pink; 
    width: 90%;
    position: relative;
    left: 10px;
    top: 10px;
}

Gives me, as expected: