css - 无法创建带有横线的标题

Question

我想创建的标题有一条水平线穿过它们，标题文本出现在该线上方，即使我相信我已经正确使用了 z-index 规则它仍然不起作用，这就是我的 css使用；

.heading {
border-bottom: 2px solid #222222!important;
text-align: center;
z-index: -1;
}

#sidebar .widget h3, #sidebar .widget .heading h3 {
color: #333333;
text-align: center;
z-index: 10;
margin-bottom: -8px;
position: relative;
}

网址是:http://crossfitblackboard.com/

Answer 1

z-index

仅在您使用 position

时有效

因此您还需要将 .heading 设置为 position: relative