问滚动时，将内容div隐藏在固定div下面。
EN

Stack Overflow用户

提问于 2016-12-25 18:54:08

回答 1查看 128关注 0票数 0

.阴影盒 div，用作固定的标头，包含徽标和2按钮.
.rest div用于内容，在滚动时应该放在标题下面。

现在，当页面被滚动时，来自.rest 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>

html

css

回答 1

Stack Overflow用户

发布于 2016-12-25 18:59:34

您的固定div .shadow-box是透明的。给它加上一些背景。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41323722

复制

相似问题

问滚动时，将内容div隐藏在固定div下面。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动时，将内容div隐藏在固定div下面。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动时，将内容div隐藏在固定div下面。
EN