z-index在Chrome中不起作用，在FF，IE等中均可工作

Question

我有一個div圖像，當單擊該圖像時會顯示具有較高z索引的較大圖像，該圖像顯示在較小圖像的div之外。 在FF，IE等中，它可以正確顯示，但在Chrome中，它可以顯示覆蓋的圖像，但隱藏在包含div的“溢出：隱藏”中（（應在框外顯示其寬度大於包含框，並顯示較高的z-index） ）。

因此，從本質上來說，單擊基礎圖像一欄寬將在基礎圖像的div頂部和外部加載較大的較寬圖像2列寬。

下面的代碼按我在IE，FF等中提到的方式工作

這是HTML：

<div id="wrapper">
    <div id="list">
        <div class="item">
            <div class="tile bg0 hoverImage0">
                <img src="images/expand-icon.png" class="mouse" alt="Image is clickable" title="Image is clickable">
                <img src="images/Image_Expandible.jpg" alt="W">
            </div>
            <div class="tile imageExpanded overlayImage0" style="visibility:hidden">
                <img src="images/Image_EXPANDED.jpg" alt="W">
            </div>
        </div>
    </div>
</div>
</div>

CSS：

#wrapper {
    max-width: 80em;
    min-height: 66em;
    margin: 0 auto;
    position: relative;
    z-index: 1000;
}
#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: .875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1em;
    column-fill: auto;
    position: relative;
    z-index: 1000;
}
.item {
    margin-bottom: 1em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    border: 0px solid #000;
    overflow: visible;
    position: relative;
    z-index: 1000;
}
.tile {
    border: 2px solid #908094;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 2000;
}
.mouse {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2000;
}
.hoverImage0 {
    position: relative;
    z-index: 2000;
}
.overlayImage0 {
    width: 1200px;
    height: 840px;
    position: absolute;
    top: 0;
    left: 0;
    transition:all 50ms ease-in-out 50ms;
    background: #000;
    overflow: visible;
    z-index: 5000;
}
.imageExpanded {
    width: 848px;
    height: 633px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6000;
}
.imageExpanded img {
    height: 630px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6000;
}

JavaScript：

   jQuery(function ($) {
       $("div.hoverImage0").click(function () {
           $(this).css('cursor', 'pointer');
           $("div.overlayImage0").stop(true, true).css('visibility', 'visible');
       });
       $("div.hoverImage0").mouseleave(function () {
           $(this).css('cursor', 'default');
           $("div.overlayImage0").stop(true, true).css('visibility', 'hidden');
       });)
   };

Answer 1

我已經知道，問題出在.item的 position屬性中

所以，如果您在注釋中添加一行

.item {
    margin-bottom: 1em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    border: 0px solid #000;
    overflow: visible;
/*  position: relative; */  <-- HERE
    z-index: 1000;
}

Chrome似乎一切正常。

這是測試：

 jQuery(function ($) { $("div.hoverImage0").click(function () { $(this).css('cursor', 'pointer'); $("div.overlayImage0").stop(true, true).css('visibility', 'visible'); }); $("div.hoverImage0").mouseleave(function () { $(this).css('cursor', 'default'); $("div.overlayImage0").stop(true, true).css('visibility', 'hidden'); }); }); 

 #wrapper { max-width: 80em; min-height: 66em; margin: 0 auto; position: relative; z-index: 1000; } #list { width: 100%; overflow: hidden; margin-bottom: .875em; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-fill: auto; column-count: 3; column-gap: 1em; column-fill: auto; position: relative; z-index: 1000; } .item { margin-bottom: 1em; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; border: 0px solid #000; overflow: visible; /* position: relative;*/ z-index: 1000; } .tile { border: 2px solid #908094; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; position: relative; z-index: 2000; } .mouse { position: absolute; top: 20px; right: 20px; z-index: 2000; } .hoverImage0 { position: relative; z-index: 2000; } .overlayImage0 { width: 1200px; height: 840px; position: absolute; top: 0; left: 0; transition:all 50ms ease-in-out 50ms; background: #000; overflow: visible; z-index: 5000; } .imageExpanded { width: 848px; height: 633px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 6000; } .imageExpanded img { height: 630px; position: absolute; top: 0; left: 0; z-index: 6000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="wrapper"> <div id="list"> <div class="item"> <div class="tile bg0 hoverImage0"> <img src="http://skywalker.websight-dev.co.za/images/expand-icon.png" class="mouse" alt="Image is clickable" title="Image is clickable" /> <img src="http://skywalker.websight-dev.co.za/images/Image_Expandible.jpg" alt="W" /> </div> <div class="tile imageExpanded overlayImage0" style="visibility:hidden"> <img src="http://skywalker.websight-dev.co.za/images/Image_EXPANDED.jpg" alt="W" /> </div> </div> </div> </div> 

PS當然，這不是修復它的最佳方法，因為它看起來像是一個錯誤（或位置，溢出和列數之間的某些沖突），因此也許您應該重新構建標記。