Question

我试图编写一些语义正确的HTML，我在文档中使用页眉和页脚。

文档结构如下

    <header class="headerBar">
    
        <section>
            <button class="button-raised">
                <i class="material-icons">arrow_back</i>
                <span class="button-span">Feb-11</span>
            </button>
        </section>

        <section>
            <span id="dateSpan">
                12-FEB-2018
            </span>
        </section>

        <section>
            <button class="button-raised">
                <span class="button-span">Feb-13</span>
                <i class="material-icons">arrow_forward</i>
            </button>
        </section>
        
    </header>

    <main>
        <section class="blocksCounter">
            <span id="totalCounter">Total:</span>
            <span id="toDoCounter">ToDo:</span>
            <span id="doneCounter">Completed:</span>
        </section>

        <div class="studyBlockElement current">
            <i class="material-icons">navigate_next</i>
            <span class="studyBlockElementTextSpan">
                Yo man!
            </span>
            <div class="studyBlockElementRightButtons">
                <i class="material-icons"></i>
                <i class="material-icons"></i>
                <i class="material-icons">clear</i>
            </div>
        </div>

        <div class="studyBlockElement todo">
            <i class="material-icons"></i>
            <span class="studyBlockElementTextSpan">
            Yo man!
            </span>
            <div class="studyBlockElementRightButtons">
                <i class="material-icons"></i>
                <i class="material-icons"></i>
                <i class="material-icons">clear</i>
            </div>
        </div>
    </main>

    <footer class="footerBar">
        <button class="button-raised--white">
            <i class="material-icons">settings</i>
            <span>settings</span>
        </button>
        <button class="button-raised--white">
            <i class="material-icons">pie_chart_outlined</i>
            <span>stats</span>
        </button>
                <button class="button-raised--white">
            <i class="material-icons">school</i>
            <span>studies</span>
        </button>
                <button class="button-raised--white">
            <i class="material-icons">query_builder</i>
            <span>timer</span>
        </button>
    </footer>

    <div id="settingsModal" class="modal"></div>

p {
    padding-left: 40px;
    position: relative;
}
p:before {
    content: '';
    display: block;
    width: 35px;
    border-bottom: 4px solid #FBDBD3;
    position: absolute;
    left: 0;
    top: 6px;
}

现在，页眉主页和页脚占据了100％的高度。一旦按下按钮，模态也应该。

问题在于即使我将每个元素的z-index设置为0而我的div的z-index设置为更高的页脚和标题仍然位于div的顶部。

我找到了解决问题的方法。给页眉和页脚一个负z-索引，但我不太喜欢这个解决方案长期，无论如何，我想知道为什么z-indexing div高于footer和header元素不会产生任何结果。< / p>

Answer 1

这是因为你必须给#settingsModal absolute一个位置。由于该元素的位置目前设置为默认值static，因此它不会按照您希望的方式移动。

来自CSS-Tricks：

CSS中的z-index属性控制垂直堆叠顺序重叠的元素。就像在，哪一个看起来好像是在物理上离你更近。 z-index仅影响具有位置的元素 static以外的值（默认值）。

<header>和<footer>元素保持在顶部，除非给出负z-index

1 个答案: