Internet Explorer中的Z-Index

我試圖讓z-index在我的HTML代碼中工作。我已經在幾個地方看過這個，並且說我需要爲我的div添加一個位置。我已經做到了這一點，但仍然無法正常工作。以下是我用於z-index的CSS和HTML。Internet Explorer中的Z-Index

CSS：

.Location{ 
    width: 1000px; 
    margin-top: 50px; 
    margin-left: auto; 
    margin-bottom: 0px; 
    margin-right: auto; 
} 

.logo{ 
    background-color: white; 
    position: relative; 
    left: 40px; 
    float: left; 
    width: 225px; 
    z-index: 10; 
    padding-left: 15px; 
    padding-bottom: 20px; 
    padding-top: 20px; 
}

來源

2010-07-29 Slick Willis

告訴我們您的分層請。並請提供標記。 – 2010-07-29 00:19:59

其中是html部分 – Hoque 2010-07-29 00:21:52

你有什麼是正確適用的z-index：的位置鍵入相對的，固定的或絕對的。 IE的問題在於，它不像在其他瀏覽器中那樣在整個文檔中全局應用元素的z-index。

在IE中，z-index僅應用於堆棧上下文中，該堆棧上下文由具有相對位置，固定或絕對位置的任何元素自動創建。

其結果是，你很可能得到了下面的，這就是爲什麼z-index的工作不爲你所期望的：

<div style="position: relative"> 
    <div style="position: relative; z-index: 1;"> 
    </div> 
</div> 
<div style="position: relative"> 
    <div style="position: relative; z-index: 2;"> 
    </div> 
</div>

在上面，所有的瀏覽器但 IE將始終將z-index：2 div放在z-index上方：1.但是，IE並不總是因爲這兩個元素都在它們自己的堆棧上下文中，因此它們的z-index不適用於彼此。

修復的方法是的z-index添加到正在創建單獨的堆疊上下文中的父元素：

<div style="position: relative; z-index: 1;"> 
    <div style="position: relative;"> 
    </div> 
</div> 
<div style="position: relative; z-index: 2;"> 
    <div style="position: relative;"> 
    </div> 
</div>

來源

2010-07-29 00:30:56 Pat

-1

那麼你有沒有所以這是一個有點難以幫助您發佈任何HTML。但是這些文章應該可以幫助您瞭解如何使用z-index正確：

來源

2010-07-29 00:22:35 JohnB

Internet Explorer中的Z-Index

回答

相關問題