为什么我的 position：absolute 元素总是出现在 position：relative items 下面？-解网

问：

这一切都在问题中，但这里有一个简单的例子

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <title>TEST</title>
</head>
<body style="margin:0;padding:0">

<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
    <div style="position:relative">
        <span style="position:absolute;display:block;height:250px;width:250px;background:green;z-layer:2"><br /><br />Should be on top</span>
    </div>
    <span style="position:relative;display:block;width:500px;background:blue;z-layer:1">Actually on top</span>
</div>

</body>
</html>

HTML CSS XHTML

<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
    <div style="position:relative;z-index:2">
        <span style="position:absolute;display:block;height:250px;width:250px;background:green"><br /><br />Should be on top</span>
    </div>
    <span style="position:relative;display:block;width:500px;background:blue;z-index:1">Actually on top</span>
</div>

4赞 Nick Allen 2/24/2009 #2

发生这种情况是因为，当您“绝对”定位一个元素时，它会从文档对象模型中的文档流中删除，因此保留在文档流中的元素将显示在已删除元素的“上方”。为了实现跨浏览器兼容性，请将 z 索引调整放在绝对定位元素的父元素上。

上一个：关于“反向 LIKE”的 MySQL 问题

下一个：PDO 的 rowCount（）在 PHP 5.2.6+ 上不起作用 [重复]

为什么我的 position：absolute 元素总是出现在 position：relative items 下面？

Why is my element with position:absolute always showing up underneath position:relative items?

评论