CSS red square on top

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.

Temani Afif · Accepted Answer · 2019-06-26T20:35:48.637

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

score 0 · Answer 2 · answered Mar 29 '19 at 12:47

0

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.

answered Mar 29 '19 at 12:47

Rafael Albuquerque

1

Oh, you were trying to get it on top of the other images? I thought you wanted to get it always on top of the window. My bad. – Rafael Albuquerque Mar 29 '19 at 12:49
no, that doesn't work. Yes, like you said on your comment. :) – Astrea Mar 29 '19 at 12:51

score 0 · Answer 3 · answered Mar 29 '19 at 13:01

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

CSS red square on top

3 Answers3