点击a标签包裹的绝对定位的元素不触发a链接跳转的处理

有时需要在a标签下使用绝对定位来布局，此时a标签包裹的绝对定位的元素可能会导致出现“无法跳转区域”，如：

<style>
.wrap {
    position: relative;
    cursor: pointer;
    background-color: #fff;
    border: 20px solid #fff;
    margin-bottom: 0.3rem;
}
.wrap .txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
</style>
<a href="#" class="wrap">
  <div class="img-box">
    <img src="./assets/images/muchengyuzhong/wenlv/3-1.jpg" alt="博物馆">
  </div>
  <div class="txt">博物馆</div>
</a>

点击a标签下的div.txt元素，并不会触发a标签的链接跳转。

解决方法添加”pointer-events: none;”

<style>
.wrap .txt {
	pointer-events: none;
}
</style>