Question

我有一个带有图像的div，当点击时会显示一个较大的z-index图像，它会显示在较小图像的div之外。在FF，IE等中它显示正确，但在Chrome中它显示了重叠的图像，但它隐藏在包含的div＆＃34;溢出：隐藏＆＃34;，（它应该在框外显示它比包含框更宽）更高的z指数。）

因此，实质上点击底层图像，一列宽可以在底层图像的顶部和外部加载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 的位置属性中

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

.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中的一切似乎都运行良好。

以下是测试：

＆＃13;

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');
       });
});

＆＃13;

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

＆＃13;

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

＆＃13;

P.S。当然，它不是修复它的最佳方法，因为它看起来像一个bug（或位置，溢出和列数之间的某些冲突），所以也许你应该重建标记。

z-index在Chrome中不起作用，适用于FF，IE等

1 个答案: