只有一半的<a>标记被链接。

Question

我正在尝试创建两个带有可点击标题的列框。我有一切设置和工作，但当我测试时，我意识到只有一半的标题是可点击的。在左边的列上，左半部分是可点击的。在右边的列上，右半部分是可点击的。“a”标记应用于整个标题。

<section class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="item-block">
                    <a href="#"><h3 class="block-header">#</h3></a>
                    <p>#</p>
                </div>
                <div class="item-block">
                    <a href="#"><h3 class="block-header">#</h3></a>
                    <p>#</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="item-block">
                    <a href="#"><h3 class="block-header">#</h3></a>
                    <p>#</p>
                </div>
                <div class="item-block">
                    <a href="#"><h3 class="block-header">#</h3></a>
                    <p>#</p>
                </div>      
            </div>
        </div>
    </section>

我增加了一张布局的图片。在每个项目块的顶部是一个块头，它是蓝色的条。红色部分是连接的部分。蓝色部分什么也做不了。

​

css：

.item-block {
    border: 2px solid #0026FF;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:20px;
    border-radius: 6px;
    font-size:1.2em;
}

.block-header {
    text-align:center;
    background:#0026FF;
    padding:10px;
    color:white;
    margin-top:0px;
    margin-bottom:10px;
    border-radius: 3px 3px 0px 0px;
}

.item-block .block-header a {
    color:white;
    display:block;
}

有人知道如何解决这个问题，这样整个标题就可以点击了吗？

Answer 1

我发现这个问题是我页面的另一个部分。页面的下方是一个中心列，它与页面中心的任何部分重叠，使得这些部分不能正常工作。我更改了双列的z-index，将其置于居中列之上，现在它正常工作了。