Question

我有4个div重叠，如封面流程FIDDLE HERE

我已经设法以正确的方式堆叠它们（一个在另一个上面），但我知道我对z-index做错了。 3我遇到的问题：

我只能定位第一个div（#product-image），其他所有3个div都没有响应点击事件。
尝试在平滑过渡中切换透视图，但显然我也做错了。
虽然我已指定包装宽度并设置了margin：0 auto。

我已尝试关注此SO回答CSS: Overlapping DIVs issue 但我只能使它工作3个div，而不是我的情况。

以下结构： HTML

<div class="product-download">
    <div id="product-image">
        <img src="http://placehold.it/300x216" />
    </div>
    <div id="in-situ-image">
        <img src="http://placehold.it/300x216" />
    </div>
    <div id="product-flyer">
        <img src="http://placehold.it/300x216" />
    </div>
    <div id="data-sheet">
        <img src="http://placehold.it/300x216" />
    </div>
</div>

CSS

body {
    overflow:hidden;
    width:100%;
    margin:0 auto;
}
.product-download {
    position:relative;
    width:934px;
    height:397px;
}
.product-download > div {
    position:absolute;
    display:inline-block;
}
#product-image {
    z-index:6;
}
#in-situ-image {
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:5;
    left:120px;
}
#product-flyer {
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:4;
    left:265px;
}
#data-sheet {
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:3;
    left:410px;
}

Jquery的

$(".product-download div").click(function () {
    alert(this.id);
    $(this).fadeTo('slow').css('-webkit-transform', 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)');
    $(this).prevAll().fadeTo('slow').css('-webkit-transform', 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)');
    $(this).nextAll().fadeTo('slow').css('-webkit-transform', 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)');
});

Answer 1

正如我所说，我一直在搞乱它，看看我能发挥什么作用。我找到了一种让它们可点击的方法！你需要整理z-index，但这确实有效。

在父级上设置transform似乎允许再次单击其他人。我不是百分之百确定这是如何实现诚实的，但它确实解决了问题。

<强> CSS：

.product-download {
    position:relative;
    width:934px;
    height:397px;
    -webkit-transform: perspective(600px) rotateY(0deg) translateZ(0px);
}

DEMO HERE

注意：如果有人可以检查一下那会很棒。它似乎停止为我工作，但后来又开始工作......不确定我是否错过了点击或其他东西。请留下评论，说明这是否为您解决了问题。

只是z-index的一个例子，你需要改变它，否则它们会相互通过。

刚补充说：

.css('z-index','1');

到prevAll()和nextAll()。

的末尾

然后在fadeTo()设置：

.css('z-index','9999');

这只是一个简单的例子，你可以把它搞砸一下。希望这有帮助！

DEMO HERE

解决了z-index问题。

<强> jQuery的：

$(this).nextAll().each(function (index) {
    $(this).fadeTo('slow').css('-webkit-transform', 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)').css('z-index', '-' + index);
});

DEMO HERE

Answer 2

你有两个问题：一个有z-index属性，另一个有translateZ属性

要解决z-index问题，可以尝试以下代码：

$(".product-download div").click(function() {
    // Get the maximum number of items and set the max z-index and the min z-index
    var max_zindex = $(".product-download div").length;
    var min_zindex = 1;
    // Get the item index    
    var index = $(".product-download div").index(this);
    // Fix the z-index position of all the divs
    $(this).css('z-index', max_zindex);
    var id = $(this).attr('id');
    $(".product-download div:not('" + id + "')").css('z-index', min_zindex);
});

主要问题在于translateZ属性。

定位多个重叠的div

2 个答案: