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

Question

我有以下 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 不再是 anchor I.E.我无法点击 <a>没有了，为什么？

现在我找到的一个解决方案是将容器更改为 div标签和内部有一个 a并对其应用以下样式:

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

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

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

Answer 1

您需要添加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>