Question

我对css和html很新。这个问题非常简单，但是我堆叠了..

当我向下滚动页面时，我的<section>标记position:fixed仍然是固定的。

但是这一部分最后与页脚重叠，我不希望它发生代码如下：

<!-- section tag -->
    <section class="fix">
            <header>
                <h2>Corsi</h2>
            </header>
            <div class="row">
                <section class="6u">
                    <ul class="default">
                        <li><a href="#">softwares</a></li>
                        <li><a href="#">others</a></li>
                    </ul>
                </section>
    </section>

<!.. css of the class -->
    .fix
    {
    position: fixed;
    }

这里是页脚内容和相关的css：

<!-- html of the footer -->
<div id="footer">
    <section>
        <div class="row">
            <section class="6u">
                <header>
                    <h2>Social</h2>
                </header>
                <ul class="footer">
                    <li><span class="white"><span class="phone"></span></span>li>
                </ul>
            </section>
    </section>
</div>

<!-- css of the footer -->
    #footer
    {
        text-align: center;
    }

    #footer header h2
    {
        color: #FFF !important;
    }

    #footer header .byline
    {
        color: rgba(255,255,255,.2);

Answer 1

您可以使用z-index属性：

.fix {position: fixed;z-index: 1;}
#footer {position: relative;z-index: 9999;background:#ffffff;}

编辑：同时为页脚设置背景颜色，因此它不会透明

Answer 2

首先，你的html代码中有几个问题。错过或错放了几个结束标签。

<!-- section tag -->
<section class="fix">
        <header>
            <h2>Corsi</h2>
        </header>
        <div class="row">
            <section class="6u">
                <ul class="default">
                    <li><a href="#">softwares</a></li>
                    <li><a href="#">others</a></li>
                </ul>
            </section>
    </div>
</section>


<div id="footer">
<section>
    <div class="row">
        <section class="6u">
            <header>
                <h2>Social</h2>
            </header>
            <ul class="footer">
                <li><span class="white"><span class="phone"></span></span></li>
            </ul>
        </section>
        </div>
</section>

您不需要z-index，因为您尚未声明页脚的任何位置。请参阅工作示例here

部分位置：固定重叠页脚

2 个答案: