Question

我有2个div视频和图像，我想有选择地使用JQuery显示/显示但实际上并未将其隐藏.hide或.show()，请忽略shopify代码。

当用户点击下面的缩略图时，如何使用JQuery / CSS将它们叠加在一起但不使用.hide或.show方法？

<div id="mainVideoContainer">
    <video id="mainVideo" width="320" height="240" autoplay controls>
        <source src="http:video.mp4" type="video/mp4">      
    </video>
</div>
<div class="mainImageContainer">
    <a href=""><img src="imageurl"/></a>
</div>

Answer 1

使用CSS可以将两个div放在一起。

首先，用包装器包装div作为参考点：

<div class="wrapper">
   <div id="mainVideoContainer" class="layer">
   <video id="mainVideo"   width="320" height="240" autoplay controls>
      <source src="http:video.mp4" type="video/mp4">    
   </video>
  </div>
   <div class="mainImageContainer layer">
    <a href=""><img src="imageurl"/></a>
   </div> 
</div>

然后，将两个div放在彼此的顶部：

.wrapper {
position:relative; // point of reference
}

.layer {
position:absolute;
top:0;
left:0;
}

至于确定哪些是可见的，您可以使用z-index或display属性

检查this fiddle。更改z-index值并查看值较高的值是如何显示的。

Answer 2

您可以使用css z-index属性。索引最高的项目将位于堆栈的顶层。我可以使用jQuery在用户单击按钮时更改z-index。

 <html>
    <head><title>Z-Index</title>
     <style>
    img
   {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
 }
 </style>
 </head>

  <body>
 <h1>This is a heading</h1>
 <img src="w3css.gif" width="100" height="140" />
 <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
 </body>
 </html>

您可能会发现本教程对熟悉z-indez css属性http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

非常有用

Answer 3

你需要这样的东西，它会在点击时切换z-index：

$('.tab').click(function(e){
    $('.tab').css('z-index', 1)
    $(this).css('z-index', 10);    
});

不要忘记在css .tab {position: relative}中设置，有关更多详细信息，请查看此JSFiddle：http://jsfiddle.net/dP4NX/1/

彼此重叠

3 个答案: