CODEWITHSUNDEEP
css
Astrea
Astrea

Reputation: 148

CSS red square on top

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.

Upvotes: 0

Views: 485

Answers (3)

Temani Afif
Temani Afif

Reputation: 273750

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

Upvotes: 2

Malolan
Malolan

Reputation: 63

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

Upvotes: 0

Rafael Albuquerque
Rafael Albuquerque

Reputation: 1

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.

Upvotes: 0

Related Questions