Question

我有一块坚固的代码。工作良好。除了我网站的页脚。不知道为什么但标题栏没有显示页脚，但它们在其他地方？

这是一张工作代码的笔 http://codepen.io/VincentStephens/pen/EjyJKP

以下是不工作网站的屏幕截图： https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0

这可以通过创建：before元素来实现。将菜单文本放入范围，然后使用z-index将范围定位在：before。

之上

你可以看到那里的元素（见照片），一切都是相同的，但只是赢了，除非我将z-index更改为0或更高但是然后该行高于跨度中的标题文本？ ??

h1.heading {
    color: $light-gold;
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 300;
    line-height: 40px;
    font-family: SourceSansPro;
    span {
        background-color: $golden-black;
        display: inline-block;
        z-index: 1;
        padding-right: 10px;
    }
}

h1.heading:before {
    content: "";
    background-color: $light-gold;
    display: block;
    position: relative;
    top: 23px;
    width: 100%;
    height: 6px;
    z-index: -1;
}

HTML - 工作

<h1 class="heading"><span>The Team</span></h1>

HTML - 页脚，无效

<div class="fluid-container footer">
    <footer class="container">

        <div class="col-lg-4">
            <h1 class="heading"><span>About</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bestiarum vero nullum iudicium puto. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; De illis, cum volemus. Duo Reges: constructio interrete. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.</p>
        </div>

        <div class="col-lg-4">
            <h1 class="heading"><span>Address</span></h1>
            <p class="address">
                address<br>
            </p>

            <p class="address">
                Tell: 0207 374 6141 <br>    
                Email: <a href="">enquiries@company.com</a>
            </p>
        </div>

        <div class="col-lg-4">
            <h1 class="heading"><span>Connect</span></h1>
            <img src="img/social-media.png" width="186" height="46">

            <h1>Payment Options</h1>
            <img src="img/payment-cards.png" width="267" height="56">
        </div>
    </footer>
</div>

Answer 1

感谢关于理智的那一刻......这确实是一个立场问题。

页脚也有背景色。这样整个元素就需要添加position: relative; and z-index: -1;。

相同情况下其他人的完整代码：

SCSS - 需要编译

.fluid-container.footer {
    position: relative;
    z-index: -1;
    background-color: $light-golden-black;
    footer {
        h1.heading {
            color: $light-gold;
            text-transform: uppercase;
            font-size: 32px;
            font-weight: 300;
            line-height: 40px;
            font-family: SourceSansPro;
            position: relative;
            span {
                background-color: $light-golden-black;
                display: inline-block;
                z-index: 1;
                padding-right: 10px;
                position: relative;
            }
        }

        h1.heading:before {
            content: "";
            background-color: $light-gold;
            display: block;
            position: absolute;
            top: 23px;
            width: 100%;
            height: 6px;
            z-index: -1;
        }
    }
}

Css z-index与bootstrap无法正常工作

1 个答案: