滚动时将内容div隐藏在固定div下方
[英]Hide the content div underneath the fixed div while scrolling
问题描述
- .shadow-box div used as a fixed header containing logos and 2 button.
.shadow-box div用作包含徽标和2按钮的固定标题。 - .rest div used for content and should go underneath the header while scrolling. .rest div用于内容，滚动时应放在标题的下面。
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; 现在，当页面滚动时， .rest div中的内容将滚动并与.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 个解决方案
解决方案1
1 2016-12-25 18:59:34
Your fixed div .shadow-box is transparent. 您固定的div .shadow-box是透明的。 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>
解决方案2
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);} 1-将您的背景颜色添加到body中：body {background-color：rgb（250,250,250）;}
or 2- remove this code from .rest {top: 60px;} and increase margin-top: 70px; 或2-从.rest {top：60px;}中删除此代码，并增加margin-top：70px;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
滚动时隐藏透明 div 下的内容 - Hide content underneath a transparent div while scrolling
从下面的滚动div剪辑固定的div - clip a fixed div from a scrolling div underneath
内容div在固定页脚div下面显示 - Content div showing underneath fixed footer div
滚动时固定 div - Fixed div while scrolling
在固定div位置下滚动时隐藏页面内容 - hide content of page when scrolling under a fixed div position
固定div与动态内容不滚动 - fixed div with dynamic content not scrolling
固定div与滚动内的内容 - fixed div with content inside scrolling
固定Div-内容正在滚动 - Fixed Div - content is scrolling behing
下溢滚动div - Overflow scrolling div underneath
固定的DIV显示下方的元素 - Fixed DIV shows elements underneath
相关标签