Question

此代码目前适用于所有现代浏览器，而不是IE6 / IE7。有什么建议？我无法绝对定位任何一个：所有这些都需要适应内容。同样，我相信这在现代浏览器中非常有效。

http://www.webdevout.net/test?02h&raw

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
    <style type="text/css">
    body { padding: 0; margin: 0; }
    #first { background: blue; padding: 0px 25px 25px 25px; margin-bottom: -10px; position; relative; z-index: 7; }
    #second { background: #DDD; border: 1px dashed gray; height: 200px;  position: relative; z-index: 8; display: block; }
    #precedence { float: right; height: 40px; width: 40px; background-color: #f09; z-index: 9; position: relative; }
    </style>
  </head>
  <body>
    <div id="first">
      <div id="precedence"></div>
    </div>
    <div id="second"></div>
  </body>
</html>

同样，这不能使用绝对定位。

Answer 1

你的问题不是很清楚，但我认为你是在尝试做这样的事情？将你的CSS更改为：

body {
padding: 0; margin: 0; }
#first {
background: blue;
padding: 0px 25px 25px 25px;
margin-bottom: -10px;
z-index: 7;
}
#second {
position: relative;
background: #DDD;
border: 1px dashed gray;
height: 200px; 
z-index: 8;
display: block;
}
#precedence {
height: 40px;
width: 40px;
background-color: #f09;
z-index: 9;
position: absolute;
left: 100%;
margin:0 0 0 -65px;
}

与你拥有的相同，但也适用于ie6 / 7

是的，那里有一个绝对定位的元素。我知道你指的是非绝对的，但看看它是如何工作的，因为我认为这就是你想要的。

此外，在您的CSS中，＃first properties

中存在错误

position; relative;

应该是

position: relative;

但是这个div无论如何都不需要定位

Answer 2

所以您发布的链接与此无关？事后很好的解释。

你的ie6 / 7问题源于保证金/填充问题，以及你宣称Chris J指出的定位冲突。你确实提到了克里斯忽视的绝对定位，但是他的解决方案是可行的，你要么将其击落，因为它违反了你的规则，或者因为你没有看到它的价值。 Chris的徽标盒可以灵活地适应徽标大小的变化，只是它的位置不会改变。最后....你为什么设置第二个div显示：块？这是默认值。

这是如此简单的老兄

＆lt;！DOCTYPE html PUBLIC“ - // W3C // DTD HTML 4.01 // EN”“http://www.w3.org/TR/html4/strict.dtd"> ＆lt; html lang =“en”＆gt; ＆LT; HEAD＆GT; ＆LT;标题＆GT;试验＆LT; /标题＆GT; ＆lt; style type =“text / css”＆gt; body {padding：0;保证金：0; } #first {background：blue;填充：0 0 15px 25px;保证金：0} #second {background：#DDD;边框：1px灰色;身高：200px} #precedence {float：right;身高：40px;宽度：40px;背景色：＃F09;保证金权：25px的} ＆LT; /风格＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆lt; div id =“first”＆gt; ＆lt; div id =“precedence”＆gt;＆lt; / div＆gt; ＆LT; / DIV＆GT; ＆lt; div id =“second”＆gt;＆lt; / div＆gt; ＆LT; /体＆GT; ＆LT; / HTML＆GT;

IE6＆amp; IE7 z-index（非绝对）问题

2 个答案: