Question

我有一个包含多个页面的网站。我创建了一个页脚，所以我想将其包含在所有页面中：

<footer class="footer-section">
        <div class="footer-wrap">
            <p> ©2017 ... </p>
            <p> ... </p>
        </div>
</footer>

在其中一个页面中，我想更改页脚的颜色和z-index，因此元素可以位于其上方。

<footer class="footer-section sale-footer">
        <div class="footer-wrap">
            <p> ©2017 ... </p>
            <p> ... </p>
        </div>
</footer>

那我该怎么办呢？如果我向它添加一个类，并给该类一个z-index，那就不起作用了。这个东西只适用于Javascript吗？

页脚scss：

.footer-section{
    width: 100%;
    height: 416px;
    background: $pinkish-tan;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    letter-spacing: 1.5px;
    font-size: 12px;
}

.footer-wrap{
    @include flex;
    justify-content: space-between;
    padding: 0 10px 30px 50px;
    color: white;
    a{
        color: white !important;
        cursor: pointer;
    }
}

页脚顶部的表单：

.vende-form{
  width: 771px;
  height: 1795px;
  background-color: #5c555a;
  box-shadow: 0 0 20px 20px rgba(44, 40, 44, 0.1);
  margin: 0 auto;
  margin-bottom: -30px;
  z-index: 100;
  padding-left: 72px;
  padding-top: 63px;
}

.vende-form-header{
    font-family: HKExplorerSoft-Bold;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.28;
    letter-spacing: 0.6px;
    color: $dark-salmon;
}

Answer 1

就像@Sam Mearns所说，你能改变其他元素的z指数吗？

此外，只需在该特定页面上的页脚添加样式标记即可。

<footer class="footer-section sale-footer" style="z-index: 99; position: relative;">
    <div class="footer-wrap">
        <p> ©2017 ... </p>
        <p> ... </p>
    </div>
</footer>

Answer 2

可能是原始z ndex应用了更具体的规则。您需要从Dev工具进行检查。试试#pageId .footer-section {z-index：99999 / *比原来的更多* /}

添加具有不同z-index的类

2 个答案: