z-индекс срабатывает для плавающих элементов

Question

Я боролся с проблемой z-index в проекте и одна вещь, которую я заметил, что современные браузеры будут запускать поведение z-index для плавающих элементов, а также для элементов, которые имеют позицию: относительную или абсолютную.Это, кажется, противоречит спецификации W3C, которая гласит:

"Применяется к: элементам со свойством 'position' типа 'absolute' или'lative '."

Вот тестовый пример:

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 это не так.

Может кто-нибудь объяснить это?

Answer 1

Возможно, я неправильно понял вопрос, но если вы замените свои правила стиля для #tabContent на

#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;
}

тогда вы увидите перекрывающиеся поля, которые ведут себя так, как будто .active не имеет z-index, и выглядят одинаково во всех браузерах.

Answer 2

Браузеры - это стандарты, соответствующие определенным экстентам, и даже различающиеся по спецификациям стандартов, которым они соответствуют.Кроме того, браузеры имеют определенные наборы функций, которые являются уникальными для них и не являются частью каких-либо стандартов W3C.

Именно поэтому при разработке для Интернета вам необходимо тестировать на очень целевом браузере.