z-index不适用于Chrome，适用于FF、IE等

Question

我有一个div，它的图像在单击时显示一个z索引更高的较大图像，它显示在较小图像的div之外。在FF、IE等中，它显示正确，但在Chrome中，它会显示重叠的图像，但它隐藏在包含的div"Overflow：hidden"中（它应该在框外显示比包含框宽的图像和更高的z索引）。

因此，本质上，单击一列宽的底层图像会加载更大、更宽的图像，在底层图像的div顶部和外部有两列宽。

下面的代码与我在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的位置属性中

所以，如果你把这句话放在评论中

.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>

附言：当然，这不是修复它的最佳方法，因为它看起来像一个bug（或者位置、溢出和列计数之间的冲突），所以也许你应该重新构建标记。