CSS红场位于顶部

Question

我将缩放工具与javascript一起使用，并且由于镜头的缘故，CSS部分有问题。

我希望通过尽可能地仅修改CSS来使红色方块（视频链接）始终位于顶部。但是我做不到，无论我影响每个类的z-index属性，镜头始终隐藏元素。

您有想法吗？

您可以在以下链接上看到代码HTML和CSS： http://jsfiddle.net/8scpq7vz/

.cloudzoom-blank {
    	z-index: 10;
    	width: 465px;
    	height: 465px;
    }
    
    .cloudzoom-lens {
    	border: 1px solid #000;
    	width: 200px;
    	height: 200px;
    	cursor: move;
    	z-index: 10;
    }
    
    .product-essential {
    	position: relative;
    	top: 0;
    	left: 0;
    }
    
    .product-essential-b1 {
    	float: left;
    }
    
    .product-img-box {
    	position: relative;
    	z-index: 3;
    	float: left;
    	width: 465px;
    	margin-left: 16px;
    	background: #FFF;
    }
    
    .product-img-box .product-image {
    	width: 465px;
    	height: 465px;
    	padding: 0px;
    	border: 2px solid #E8E8E8;
    	background: #FFF;
    }
    
    .product-img-box .product-image div {
    	position: relative;
    }
    
    .product-img-box .product-image img#image {
    	position: relative;
    	width: 465px;
    	height: 465px;
    	opacity: 0.85;
    }
    
    .product-img-box .video {
    	position: absolute;
    	left: 10px;
    	top: 10px;
    	z-index: 100;
    	cursor: pointer;
    }
    
    .v2 {
    	float: left;
    	width: 41px;
    	height: 41px;
    	text-indent: -9999px;
    	background: #F22;
    }

<div class="product-essential">
      <div class="product-essential-b1">
    	<div class="product-img-box">
    	  <p class="video" id="video-btn">
    		<a target="_blank" class="v2">Video</a>
    	  </p>
    	  <div class="ldesktop">
    		<div id="product-media">
    		 <div class="product-image">
    			<div>
    				<img src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg" id="image">
    			</div>
    		  </div>
    		</div>
    	  </div>
    	</div>
      </div>
    </div>
    
    <div class="cloudzoom-blank" style="position: absolute; top: 28px; left: 29px;">
      <div class="cloudzoom-lens" style="overflow: hidden; position: absolute; top: 27px; left: 15px;">
    	<img style="position: absolute; left: -18px; top: -46px; max-width: none; width: 465px; height: 465px;" src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg">
      </div>
    </div>

谢谢。

Answer 1

只需从z-index中删除product-img-box，以避免创建堆叠上下文，并且能够将红色正方形放在顶部：

.cloudzoom-blank {
  z-index: 10;
  width: 465px;
  height: 465px;
}

.cloudzoom-lens {
  border: 1px solid #000;
  width: 200px;
  height: 200px;
  cursor: move;
  z-index: 10;
}

.product-essential {
  position: relative;
  top: 0;
  left: 0;
}

.product-essential-b1 {
  float: left;
}

.product-img-box {
  position: relative;
  float: left;
  width: 465px;
  margin-left: 16px;
  background: #FFF;
}

.product-img-box .product-image {
  width: 465px;
  height: 465px;
  padding: 0px;
  border: 2px solid #E8E8E8;
  background: #FFF;
}

.product-img-box .product-image div {
  position: relative;
}

.product-img-box .product-image img#image {
  position: relative;
  width: 465px;
  height: 465px;
  opacity: 0.85;
}

.product-img-box .video {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 100;
  cursor: pointer;
}

.v2 {
  float: left;
  width: 41px;
  height: 41px;
  text-indent: -9999px;
  background: #F22;
}

<div class="product-essential">
  <div class="product-essential-b1">
    <div class="product-img-box">
      <p class="video" id="video-btn">
        <a target="_blank" class="v2">Video</a>
      </p>
      <div class="ldesktop">
        <div id="product-media">
          <div class="product-image">
            <div>
              <img src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg" id="image">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cloudzoom-blank" style="position: absolute; top: 28px; left: 29px;">
  <div class="cloudzoom-lens" style="overflow: hidden; position: absolute; top: 27px; left: 15px;">
    <img style="position: absolute; left: -18px; top: -46px; max-width: none; width: 465px; height: 465px;" src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg">
  </div>
</div>

相关：

Why elements with any z-index value can never cover its child?

I have position but z index is not working

Answer 2

视频元素的父元素product-essential的兄弟元素cloudzoom-blank的Z索引较低（默认为0）。因此cloudzoom-blank中的元素显示在product-essential中任何元素的上方。 （同样，如果两个都有相同的z-index，那么最后指定的一个将位于顶部）

如果可能，您可以更改元素的排列方式

Answer 3

您是否尝试过将position:fixed添加到您的.v2类中？像这样：

.v2 {
float: left;
width: 41px;
height: 41px;
text-indent: -9999px;
background: #F22;
position: fixed;
}

不确定这是否是您想要的，但似乎是。