Hide the content div underneath the fixed div while scrolling
Question
- .shadow-box div used as a fixed header containing logos and 2 button.
- .rest div used for content and should go underneath the header while scrolling.
Right now when the page is scrolled the content from the .rest div is scrolled and is overlapping with the fixed header represented by the .shadow-box div;
@font-face { font-family: 'halfmoon'; /*a name to be used later*/ src: url('halfmoon_regular.woff'); /*URL to font*/ } @font-face { font-family: 'halfmoon_b'; /*a name to be used later*/ src: url('halfmoon_bold.woff'); /*URL to font*/ } body{ margin:0px; } .shadow-box{ position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 60px; border-bottom: 2px solid #d0d4d9; box-shadow: 0px 1px 1px #d0d4d9; text-align:center; overflow: hidden; } .shadow-box .github-img{ position: absolute;; top:7px; left: 315px; margin:13px auto background: #000; } .shadow-box img{ display: inline-block; margin:13px auto; text-align: center; } .shadow-box .button-link{ position: absolute;; padding:7px 16px; top:20px; right: 335px; border:1px solid #006DF0; border-radius:10px; color: #006DF0; text-decoration: none; text-align:inherit; font-family: halfmoon_b, sans-serif; } .shadow-box .github-link{ position: absolute; padding:7px 16px; top:20px; left: 335px; color: #006DF0; text-decoration: none; text-align:inherit; font-family: halfmoon_b, sans-serif; } .rest{ position: absolute; background-color: rgb(250,250,250); text-align:center; height:800px; top:60px; width:100%; z-index:5; padding-top:20px; overflow: auto; } .rest h1{ font-weight: 300; font-size: 250%; color: rgb(100,100,100); font-family: halfmoon, sans-serif; }
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CloudBox</title> <link rel="shortcut icon" href="img/g3.ico" /> <!-- <script src="js/script.js"></script> --> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> </head> <body> <div class="shadow-box"> <a href="https://github.com/alexifrim95/CloudBox" id="git-img" class="github-img"><img src="img/GitHub-Mark-32px.png" alt="github-logo" class="github-logo"></a> <a href="https://github.com/alexifrim95/CloudBox" id="git-link" class="github-link">GitHub link</a> <img src="img/g3.png" alt="logo" class="logo"> <img src="img/logo-text.png" alt="logo-text" class=logo-text"> <a href="#" id="sign-in" class="button-link">Sign in</a> </div> <div class="rest" > <h1>Cloud platform built<br>from scratch</h1> </div> </body> </html>
2 answers
solution1
1 2016-12-25 18:59:34
Your fixed div .shadow-box is transparent. Add some background to it.
@font-face { font-family: 'halfmoon'; /*a name to be used later*/ src: url('halfmoon_regular.woff'); /*URL to font*/ } @font-face { font-family: 'halfmoon_b'; /*a name to be used later*/ src: url('halfmoon_bold.woff'); /*URL to font*/ } body{ margin:0px; } .shadow-box{ position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 60px; border-bottom: 2px solid #d0d4d9; box-shadow: 0px 1px 1px #d0d4d9; text-align:center; overflow: hidden; background-color: white; } .shadow-box .github-img{ position: absolute;; top:7px; left: 315px; margin:13px auto background: #000; } .shadow-box img{ display: inline-block; margin:13px auto; text-align: center; } .shadow-box .button-link{ position: absolute;; padding:7px 16px; top:20px; right: 335px; border:1px solid #006DF0; border-radius:10px; color: #006DF0; text-decoration: none; text-align:inherit; font-family: halfmoon_b, sans-serif; } .shadow-box .github-link{ position: absolute; padding:7px 16px; top:20px; left: 335px; color: #006DF0; text-decoration: none; text-align:inherit; font-family: halfmoon_b, sans-serif; } .rest{ position: absolute; background-color: rgb(250,250,250); text-align:center; height:800px; top:60px; width:100%; z-index:5; padding-top:20px; overflow: auto; } .rest h1{ font-weight: 300; font-size: 250%; color: rgb(100,100,100); font-family: halfmoon, sans-serif; }
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CloudBox</title> <link rel="shortcut icon" href="img/g3.ico" /> <!-- <script src="js/script.js"></script> --> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> </head> <body> <div class="shadow-box"> <a href="https://github.com/alexifrim95/CloudBox" id="git-img" class="github-img"><img src="img/GitHub-Mark-32px.png" alt="github-logo" class="github-logo"></a> <a href="https://github.com/alexifrim95/CloudBox" id="git-link" class="github-link">GitHub link</a> <img src="img/g3.png" alt="logo" class="logo"> <img src="img/logo-text.png" alt="logo-text" class=logo-text"> <a href="#" id="sign-in" class="button-link">Sign in</a> </div> <div class="rest" > <h1>Cloud platform built<br>from scratch</h1> </div> </body> </html>
solution2
0 2016-12-25 21:28:24
if you want that your nav be transparent :
1- add your background-color in body : body{ background-color: rgb(250,250,250);}
or 2- remove this code from .rest {top: 60px;} and increase margin-top: 70px;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hide content underneath a transparent div while scrolling
clip a fixed div from a scrolling div underneath
Content div showing underneath fixed footer div
Fixed div while scrolling
hide content of page when scrolling under a fixed div position
fixed div with dynamic content not scrolling
fixed div with content inside scrolling
Fixed Div - content is scrolling behing
Overflow scrolling div underneath
Fixed DIV shows elements underneath
Related Tags