顶部的 CSS 红色方 block

Question

我使用带有 javascript 的缩放工具，由于镜头的原因，CSS 部分出现问题。

我希望红色方 block (视频链接)始终位于顶部，方法是尽可能只修改 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

只需从 product-img-box 中删除 z-index 即可避免创建堆叠上下文并能够将红色方 block 放在顶部:

.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 can't an element with a z-index value cover its child?

I have position but z index is not working