javascript - z-index 在 Chrome 中不工作，在 FF、IE 等中工作

Question

我有一个带有图像的 div，单击该图像时会显示具有较高 z-index 的较大图像，该图像会显示在较小图像的 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>

附言当然，这不是修复它的最佳方法，因为它看起来像是一个错误(或者位置、溢出和列数之间存在某种冲突)，所以也许您应该重建标记。