7 Z-İndex Katman Sorunları

SORU

17 AĞUSTOS 2009, PAZARTESİ

7 Z-İndex Katman Sorunları

7 z-index hata küçük bir test çalışması izole ettim, ama bunu düzeltmek için nasıl bilmiyorum. z-index gün boyu birlikte oynuyor.

7 z-index nesi var?

Test CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

Test HTML:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

CEVAP

17 AĞUSTOS 2009, PAZARTESİ

Z-index mutlak bir ölçü değildir.Z-index ile bir öğe için mümkündür: 1000 z-index: bir elemanın arkasında 1- ilgili öğeleri farklı aittirkapsamları istifleme.

Z-dizin belirtirseniz, CSS spec's paragraph on Z-index yeni istifleme içerik konumlandırılmış içerik için oluşturulur diyor, ancak aynı istifleme bağlamında diğer öğelere göre, belirtmez-index ile otomatik dışında(tüm belge anlamı istifleme tek bir içerik olmalıdır)yaptıkonumlandırılmış bir sürede inşa: ne yazık ki yorumlar içerik z-index yeni istifleme içerik olarak bu. olmadan yerleştirilmiş 7

Kısacası, bu CSS eklemeyi deneyin:

#envelope-1 {position:relative; z-index:1;}

ya da yeniden senin yayılan bu belgeyi pozisyon yok:göreli artık:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

Bu hata benzer bir örnek için http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ bkz. Sebep bir üst öğe (zarf-1 örnek) daha yüksek bir z-dizini çalışır çünkü o zaman tüm çocukların zarf-1 (dahil) menüsü örtüşme tüm kardeşleri zarf-1 (özellikle zarf-2).

Z-ındex sağlar rağmen bir şeyler üst üste, even without z-index the layering order is well defined nasıl açıkça tanımlayın. Son olarak, IE6 selectboxes ve iframe her şeyin üstünde yüzer neden olan ek bir hata var.

Bunu Paylaş: