Question

我想将以下代码段的链接设为可点击。优先级应该是，

链接＆gt;底部图片＆gt;链接中的图片。我尝试了z-index但它没有用。

img{
  border:1px solid #000;
}
.frame{
  position: absolute;
  top:0;
  z-index:8;
}
.link a{
  z-index: 9;
}
.link img{
  z-index:7;
}

<div class="container">
  <div class="link">
    <a href="#">
      <img src="http://via.placeholder.com/350x150">
    </a>
  </div>
  <div class="frame">
   <img src="http://via.placeholder.com/400x175">
  </div>
</div>

第一图像可以保持在作为半透明图像的第二图像之下。该链接应该可以正常点击。并且无法更改HTML代码。

Answer 1

如果我理解正确，这将解决您的问题，则元素需要absolute或relative的位置才能使用z-index

＆＃13;

img{
  border:1px solid #000;
}
.frame{
  position: absolute;
  top:0;
  z-index:8;
}
.link a{
  position: relative; /** added relative **/
  z-index: 9;
}
.link img{
  position: relative; /** added relative **/
  z-index:7;
}

＆＃13;

<div class="container">
  <div class="link">
    <a href="#">
      <img src="http://via.placeholder.com/350x150">
    </a>
  </div>
  <div class="frame">
   <img src="http://via.placeholder.com/400x175">
  </div>
</div>

＆＃13;

有关详情，请访问stacking context

Answer 2

您可以pointer-events:none使用.frame类来点击链接。这里不需要z-index。

img {
  border: 1px solid #000;
}

.frame {
  position: absolute;
  top: 0;
  pointer-events: none;
  opacity: .8;
}

<div class="container">
  <div class="link">
    <a href="#">
      <img src="http://via.placeholder.com/350x150">
    </a>
  </div>
  <div class="frame">
    <img src="http://via.placeholder.com/400x175">
  </div>
</div>

可见性优先级使用z-index未按预期生成

2 个答案: