Hide scrollable content behind transparent fixed p

I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).

I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).

This is very hard to explain, so I did the best I could.

html:

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>

css:

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:1000;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

#leftlinks {
    padding: 4px;
    padding-left: 10px;
    float: left;
}

#rightlinks {
    padding: 4px;
    padding-right: 10px;
    float: right;
}

#containerfixedtop {
    width: 100%;
    height: 20px;
}

#contentfixedtop {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height:20px;
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

Here's a screenshot of the problem:

enter image description here

标签： css position fixed

8条回答

Luminary・发光体

2楼-- · 2020-01-29 06:13

I have fixed background image
The header background is transparent
I don't want my content to override my transparent header

I came up with a solution scrolling the div instead the body:

<div>
    <div class="header"></div>
    <div class="content"></div>
</div>


.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }

0人赞添加讨论(0) 举报

劳资没心，怎么记你

3楼-- · 2020-01-29 06:17

Fix the position of the content div below the header + overflow-y the content div.

0人赞添加讨论(0) 举报

该账号已被封号

4楼-- · 2020-01-29 06:18

You are probably looking for z-index. It allows you to specify the vertical order of elements on the page, so an element with z-index: 10 is floating above (visually) an element with z-index: 5.

Give the content z-index: 5 and see if it works.

0人赞添加讨论(0) 举报

劫难

5楼-- · 2020-01-29 06:20

I think this is late to answer. But later, someone have a look this will be helpful.

Simply add background to header class

Here is the code ->

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:999;
    background-color:#FFFFFF;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
   
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
    z-index:1;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

<!DOCTYPE html>
<html>


<body>

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>
</body>
</html>

0人赞添加讨论(0) 举报

Root（大扎）

6楼-- · 2020-01-29 06:28

I too faced similar issue, but solved it using a simple dirty hack

1) have a white image in images folder

2) then add this css in header style

z-index:999; // to make header above the scrolling contents

background-image : url("../images/white.png"); // to hide the scrolling content

3) It is done!!

0人赞添加讨论(0) 举报

▲ chillily

7楼-- · 2020-01-29 06:29

Just coming to this late, but in case anyone else runs across this in the future, here's your fix.

Your CSS Code:

.wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

Your HTML:

<div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header. Your .bottom-wrapper padding-top should be the height of your header wrapper's content.

Cheers!

0人赞添加讨论(0) 举报

1 2 下一页

Hide scrollable content behind transparent fixed p

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间