Question

我正在为每个<section>标记分配一个唯一ID，该标记将在我的网页上显示：伪向下箭头指示符。例如......

#welcome {
    background-color: #007ee5;
    color: #fff;
    position: relative;
}

#welcome:after {
    content: "";
    width:0px;
    height:0px;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-top:31px solid #007ee5;
    position:absolute;
    bottom:-30px; 
    left: 50%;
    margin-left: -30px;
}

上面的代码工作正常，我得到了id =＆＃34; welcome＆＃34; <section id="welcome">代码。

以下是页面：my page

当我向另一个<section id="example">标记添加另一个ID时，它会显示在页面上，但它会从另一个标记中消失????

我想在每个部分之后使用不同颜色的向下箭头指示符来匹配。

我尝试了几种不同的appraoches，但是，我没有达到预期的效果。

它是级联中的东西吗？我已尝试使用<section>标记的全局元素，但是，我无法更改指标颜色以匹配每个部分。

Answer 1

当您将position: relative应用于后续部分时，它会更改z-index。将z-index应用于:after伪类。

E.g。 z-index: 100

#welcome:after {
    content: "";
    width:0px;
    height:0px;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-top:31px solid #007ee5;
    position:absolute;
    bottom:-30px; 
    left: 50%;
    margin-left: -30px;
    z-index: 100;
}

css伪向下箭头：未显示在所有<section>标签上

1 个答案: