html - 除非绝对定位，否则 anchor 标签不可点击？

我有以下HTML：

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);

/* global css */

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}
.col-md-4 {
  width: 33.33%;
  float: left;
}
.info-boxes {
  display: block;
  position: relative;
  background: #7accc8;
  padding: 2em 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes h5 {
  font-size: 30px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.info-boxes p {
  margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  /*	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    */
  /*left: 50%;
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
    	-o-transform: translateX(-50%);
    	transform: translateX(-50%);*/
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes:hover {
  background: #f5989d;
}
.info-boxes:hover span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  /*-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);*/
  -webkit-transition: all .3s ease .2s;
  -o-transition: all .3s ease .2s;
  transition: all .3s ease .2s;
  opacity: 0
}
.info-boxes span:after {
  right: initial;
  left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
  left: calc(100% + 10px);
  opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
  right: calc(100% + 10px);
  opacity: 1;
}

<a class="info-boxes">
  <h5>2200AED</h5>
  <p>5 Private Sessions / Validity: 2 Months</p>
  <span>Online Booking</span>
</a>

现在为什么不再是锚点了我不能再单击<a>，为什么？

现在，我发现的一个解决方案是将容器更改为div标记，并且内部具有a并对其应用以下样式：

.info-boxes a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 99;
}

但这是一个“为什么”问题，而不是“如何解决此问题”。

所以我想问的是为什么在这个给定的示例中<a>标记为什么不像一个？

最佳答案

您需要添加href，否则a将不可点击

如果您不使用href，则仅将其视为占位符超链接，有关更多信息，请参见W3C

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);

/* global css */

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}
.col-md-4 {
  width: 33.33%;
  float: left;
}
.info-boxes {
  display: block;
  position: relative;
  background: #7accc8;
  padding: 2em 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes h5 {
  font-size: 30px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.info-boxes p {
  margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  /*	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    */
  /*left: 50%;
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
    	-o-transform: translateX(-50%);
    	transform: translateX(-50%);*/
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes:hover {
  background: #f5989d;
}
.info-boxes:hover span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  /*-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);*/
  -webkit-transition: all .3s ease .2s;
  -o-transition: all .3s ease .2s;
  transition: all .3s ease .2s;
  opacity: 0
}
.info-boxes span:after {
  right: initial;
  left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
  left: calc(100% + 10px);
  opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
  right: calc(100% + 10px);
  opacity: 1;
}

<a href="#" class="info-boxes">
  <h5>2200AED</h5>
  <p>5 Private Sessions / Validity: 2 Months</p>
  <span>Online Booking</span>
</a>