z-index爲浮動元素觸發

我一直在與一個項目上的Z索引問題作鬥爭，並且我注意到現代瀏覽器會觸發浮動元素上的z-index行爲，以及元素有位置：相對或絕對。這似乎違背了W3C規範的規定：z-index爲浮動元素觸發

「適用於：元素與類型的‘絕對’或‘相對’的‘位置’屬性」

這是一個測試案例：

CSS：

#tabContent{ 
    border:1px solid #ccc; 
    padding:15px; 
    margin-top:-1px; 
    margin-bottom: 1.5em; 
    background: #fff; 
    } 
p.tabHolder { 
    overflow: hidden; 
    height: 1%; 
    margin: 14px 0 0px 0; 
} 
p.tabHolder a { 
    display: block; 
    margin:0 2px 0 0; 
    padding: 6px 11px; 
    float: left; 
    background: #eee; 
    border:1px solid #bbb; 
} 
p.tabHolder a.active { 
    background-color: #fff; 
    border-bottom-width:0px; 
    color:#333; 
    padding-top: 7px; 
    z-index: 100; 
}

HTML：

 <p class="tabHolder"> 
     <a class="active" href="#">Foo</a> 
     <a href="#">Bar</a> 
    </p> 
    <div id="tabContent"> 
     <p>Lorem ipsum</p> 
    </div>

如果您在IE8中加載並切換兼容性視圖按鈕，您將看到在IE8中z-index有效，但在IE-7中不會。

任何人都可以解釋這一點嗎？

來源

2010-11-05 benb

瀏覽器是符合某種程度的標準，甚至可以在符合標準的規範中有所不同。此外，瀏覽器具有某些特定的功能，這些功能對他們來說是獨一無二的，並不屬於任何W3C標準。

這就是爲什麼在爲網絡開發時，必須在非常目標瀏覽器上進行測試的原因。

來源

2010-11-05 11:53:55 partoa

絕對。我只是感到驚訝，IE8，Chrome和Firefox都似乎與規範相矛盾。 – benb 2010-11-05 12:25:51

也許我誤解了這個問題，但如果你有

#tabContent{ 
    border:1px solid #ccc; 
    padding:15px; 
    margin-bottom: 1.5em; 
    background: #fff; 
    width:80px; 
    margin-top:-10px; 
    z-index:50; 
    float:left; 
}

或

#tabContent{ 
    border:1px solid #ccc; 
    padding:15px; 
    margin-bottom: 1.5em; 
    background: #fff; 
    width:80px; 
    margin-top:-10px; 
    z-index:50; 
    position:absolute; 
    top:10px; 
    left:20px; 
}

然後更換你的風格規則#tabContent你會看到重疊的行爲，如果箱子。活躍沒有z-index，在所有瀏覽器中看起來都一樣。

來源

2010-11-05 12:03:57 wheresrhys

z-index爲浮動元素觸發

回答

相關問題