CSS red square on top - css

Question

I use a zoom tools with javascript and I have an issue with the CSS part because of the lens.
I would like the red square (a video link) to always be on top by modifying only the CSS if possible. But I am not able to do it, the lens hide always the element no matter the z-index attribute I affect to each class...
Have you some idea?
You can see the code HTML and CSS on the following link :
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>
Thank you.

Answer 1

Simply remove z-index from product-img-box to avoid creating a stacking context and be able to place the red square on the top:
.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>
Related:
Why can't an element with a z-index value cover its child?
I have position but z index is not working

Answer 2

Have you tried this adding position:fixed to you .v2 class? Like this:
.v2 {
float: left;
width: 41px;
height: 41px;
text-indent: -9999px;
background: #F22;
position: fixed;
}
Not sure if that's what you looking for, but seems to be.

Answer 3

The video element's parent element product-essential is having lower z-index (0 as default) to it's sibling cloudzoom-blank. So elements in cloudzoom-blank is displayed above any element inside product-essential. (also if both have equal z-index, then one specified last will be on top)
You can change the arrangement of the elements if it is possible