Bootstrap 3.5.3+Quart模板中锚点等UI元素无法点击，求排查

我在基于Bootstrap 3.5.3的Quart模板中编写了如下base.html代码：

<div class="header">
  <a href="{{url_for('home.index')}}"><img src= "{{ url_for('static', filename='images/logo.png')}}" alt="logo" width="100" height="100"/></a>
  <h1 class="header-title">{{ title }}</h1>
</div>

对应的CSS样式如下：

.header {
  height: 100px;
  vertical-align: middle;
}
.header img {
  float: left;
  width: 100px;
  height: 100%;
  background: #555;
}

.header h1 {
  position: relative;
  margin: 0 auto;
  height: 100px;
  height: 100%;
  text-align: center;
  color: rgb(0, 73, 101);
}
#header-title {
  position: absolute;
  text-align: center;
  display: inline;
  margin: 0 auto;
  height: 100px;
  height: 100%;
  color: rgb(0, 73, 101);
}

但浏览器中所有UI元素均无法点击，请问问题出在哪里？

• 核心问题是绝对定位元素覆盖了可点击区域：你CSS里定义了#header-title的绝对定位样式，但HTML中并没有对应id的元素，不过如果这个样式意外作用到页面其他元素，绝对定位的元素会铺满header的高度，直接盖在左侧的<a>链接上面，导致链接无法被点击。另外，当前.header h1的布局设置也会让它占据header的大部分区域，进一步挤压可点击空间。

• 修复方案：

  1. 删除冗余的#header-title样式：既然HTML里没有这个id的元素，这段代码完全没用，直接删掉。
  2. 调整.header h1的样式：去掉重复的height声明，用line-height实现垂直居中，同时修改margin避免布局冲突：

     .header h1 {
       position: relative;
       margin: 0;
       line-height: 100px;
       text-align: center;
       color: rgb(0, 73, 101);
     }
     

  3. 给.header添加清除浮动：解决浮动元素带来的布局塌陷问题，避免影响后续元素：

     .header::after {
       content: "";
       display: table;
       clear: both;
     }
     

修改后，左侧的链接就不会被遮挡，能正常点击，标题文字也能正确居中显示。

内容的提问来源于stack exchange，提问作者khteh