JSFiddle - React, Tailwind, and code Playground

by cherishpeace

HTML

<div class="wrap">
  <a class="bg" href="http://www.baidu.com" target="_blank">
  我是背景占位，我的小正方形是背景透明的。在ie下点击小正方形会跳转。
  </a>
  <span class="dot" style="background:transparent;"></span>
</div>


<div class="wrap">
<a class="bg" href="http://www.baidu.com" target="_blank">
  我是另一个背景占位，我的小正方形背景不透明。在ie下点击小正方形不跳转。
</a>
<span class="dot"></span>
</div>

CSS

.wrap{
  position:relative;
}

.bg{
  background:#666;
  display:block;
  width:550px;
  height:100px;
  margin-top:20px;
  position:relative;
  color:#fff;
  z-index:10;
}

.dot{
  position:absolute;
  left:20px;
  top:30px;
  display:inline-block;
  width:50px;
  height:50px;
  background:#000;
  border:1px solid #000;
  z-index:20;
}