爲什麼我的元素的位置：絕對總是顯示在下面的位置：相關項目？

這一切都在這個問題，但這裏有一個簡單的例子爲什麼我的元素的位置：絕對總是顯示在下面的位置：相關項目？

<!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>

來源

2009-02-23 Andrew G. Johnson

，而不是「Z層」使用「的z-index」

也絕對跨度是在沒有z-index的一個相對的div

下面是正確的HTML：

<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>

來源

2009-02-23 17:35:52

它發生，因爲當你定位元素「絕對」它從文件中刪除流文檔對象模型以及保留在文檔流中的元素將出現在已移除元素的「上方」。爲了實現跨瀏覽器兼容性，請將z-index調整置於絕對定位元素的父元素上。

來源

2009-02-23 17:38:47

爲什麼我的元素的位置：絕對總是顯示在下面的位置：相關項目？

回答

相關問題