Question

我的网页顶部有静态导航菜单，但降低了一点，上面可以看到背景。当页面中的文本向下滚动时，它会进入菜单下方，然后再次显示在菜单上方。
如何隐藏菜单上方的文本部分。
背景也是图像如果我将文本放在菜单下面的<div>元素中并设置overflow:auto，则会将滚动条移动到div元素的一侧，而不是像预期的那样移动到页面主体。

编辑：这是jsfiddle链接http://jsfiddle.net/EmpireGlitch/N9xg2/ HTML：

 <div class="topline">
    <div class="menu">
        <ul class="interpage_navigation">
            <li><a href="">Choice 1</a>

            </li>
            <li id="active_tab"><a href="">Choice 2</a>

            </li>
    </div>
    <div id="top_seperator"></div>
</div>
<div class="article">
     <h1>Lorem ipsum</h1>

    <p>Lorem ipsum.</p>
</div>

CSS：

.menu .interpage_navigation li {
    background-color: rgba(25, 102, 25, 0.8);
}
.side, #top_seperator, #active_tab {
    background-color: rgba(50, 205, 50, 0.8);
}
.topline {
    position: fixed;
    top: 60px;
    width: 100%;
}
#top_seperator {
    height: 40px;
    width: 100%;
    clear: both;
}
.menu {
    margin:0px;
    margin-left:100px;
    position: absolute;
    bottom: 40px;
}
.menu > ul {
    overflow: auto;
    list-style-type: none;
    padding:0px;
    padding-left: 15px;
    margin:0px;
    //border: solid blue 1px;
}
.menu li {
    float:left;
    margin:0px;
}
.menu .interpage_navigation li {
    width:120px;
    height: 40px;
    margin-right: 15px;
    font-family: verdana, arial;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    text-transform: uppercase;
}
.article {
    background-color: rgba(200, 200, 200, 1);
    margin-bottom: 20px;
    padding:20px;
    padding-top: 5px;
    font-size: 18px;
    position: absolute;
    top: 0px;
    margin-top: 125px;
    left: 30%;
    right:15%;
    z-index: -1;
}

Answer 1

我使用:before伪元素创建了一个放置在页面顶部的元素 - http://jsfiddle.net/N9xg2/1/

问题在于它依赖于纯色。

你可能想重新思考一下你如何定位文章 - 使用position：绝对会真正限制你。

Answer 2

我的解决方案与Richard的解决方案相似，只是我给了.menu一个背景（并调整了它的填充）。

.menu {
    margin:0px;
    padding-left:100px;
    position: absolute;
    bottom: 40px;
    background-color: white;
    width: 100%;
    padding-top: 20px;
}

Demo here

但我知道你想使用图像背景。您可以使用以下方法解决该问题：

background-attachment: fixed;

Demo here

隐藏网页元素

2 个答案: