Question

在我的下面的代码中，为什么第二个文本框显示在div上方？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <body>
        <div style="position:relative;width: 170px;height: 50px;">
            <input type="text"  />
            <div style="position: absolute;z-index: 999999;border: 1px solid;background:#D1C9AF;left:0;top:30px;">
                demo text div1 demo text div1 demo text div1 demo text div1 demo text div1 demo text div1
                demo text div1 demo text div1 demo text div1 demo text div1 demo text div1 demo text div1
                demo text div1 demo text div1 demo text div1 demo text div1 demo text div1 demo text div1
            </div>
        </div>      
        <div style="position:relative;width: 170px;height: 50px;">
            <input type="text"  />
        </div>
    </body>
</html>

Answer 1

这是因为您在position: absolute上设置了div。这会将元素从页面流中取出，并且意味着它周围的元素将忽略它占用的空间。

这是一些further reading on CSS positioning

Answer 2

相对总是在IE7中具有更高的z-index，你可以简单地从这两个div中移除相对位置，或者将绝对值放在相对较高的z-index那两个中。

在IE7位置相对显示位置绝对值？

2 个答案: