Question

.shadow-box div用作包含徽标和2个按钮的固定标头。
.rest div用于内容，在滚动时应位于标题下方。

现在滚动页面时， .rest div中的内容会滚动显示，并与 .shadow-box div所代表的固定标题重叠; < / p>

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您的固定div .shadow-box是透明的。添加一些背景信息。

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

如果您希望导航透明：

1-在身体中添加背景颜色：body {background-color：rgb（250,250,250）;}

或 2-从.rest {top：60px;}中移除此代码并增加margin-top：70px;

滚动时隐藏固定div下面的内容div

2 个答案: