我试图让它成为.header和.nav始终保持固定的位置;有效地使它们永远不会从视口中消失。
有趣的是我正在使用FlexBox，而且我从未听说过FlexBox实用程序允许我将项目固定到视口。
目标：使.header和.nav保持在视口中的固定位置。
有人可以帮助我吗？
*{
margin:0;
font-family: 'Roboto', sans-serif;
}
.wrapper{
width:100%;
min-width: 960px;
margin:0 auto;
/*display:flex;
align-items: flex-end;
this is just for the night vision button to position better
*/
}
.parent{
display:flex;
flex-wrap: wrap;
/*these two at the bottomr are optional to
center them on the page
max-width: 960px;
margin:0 auto;*/
max-width: 960px;
margin: auto;
}
/*WE MISSED THE .ONE SELECTOR*/
.one{
flex-grow: 1;
}
.title{
text-align: center;
position:relative;
font-size: 50px;
top:20px;
}
.header{
height:100px;
width:100%;
order:0;
border-bottom: 1px solid rgb(0,0,0);
align-self: flex-start;
}
.banner{
width:100%;
min-width: 960px;
height:500px;
color:white;
background-color: rgb(0,0,0);
order:3;
}
.boxOne{
width:45%;
min-width: 200px;
height:300px;
border-right: 1px solid rgb(0,0,0);
order:4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-left: 1px solid rgb(120,120,120);
text-align: justify;
}
.boxTwo{
width:45%;
min-width: 200px;
height:300px;
order:4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-right: 1px solid rgb(120,120,120);
}
.footer{
width:100%;
height:100px;
border-top: 1px solid rgb(0,0,0);
border-bottom: 1px solid rgb(0,0,0);
border-right: 1px solid rgb(120,120,120);
border-left: 1px solid rgb(120,120,120);
order:5;
}
.nbar{
display:flex;
-webkit-display:flex;
flex-wrap: wrap;
align-items: stretch;
flex-flow: wrap;
border-bottom: 1px solid rgb(0,0,0);
order:1;
}
.two{
flex-grow: 0;
}
.home {
order:1;
}
.services {
order:2;
}
.testimonials {
order:3;
}
.portfolio {
order:4;
}
.contact {
order:5;
}
li {
display:inline-flex;
padding:10px 40px 10px 60px;
font-size: 15px;
/*border: 1px solid rgb(0,0,0);*/
/*text-align: center;
align-content: stretch;*/
justify-content: center;
background-color: white;
transition: background-color 0.08s linear;
}
li:hover {
color:white;
background-color: rgb(0,0,0);
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration: none;
color:black;
}
a:hover {
text-decoration: underline;
color:rgb(255,255,255);
}
.tt:link {
text-decoration: none;
color:black;
}
.tt:visited {
text-decoration: none;
color:black;
}
.tt:hover {
text-decoration: none;
}
.disc{
padding-left: 5px;
padding-top: 5px;
font-size: 10px;
color: rgb(150,150,150);
}
.people{
overflow: hidden;
height:500px;
width:960px;
}
/*.popup {
background-color: white;
height: 20px;
width:90px;
border: 1px solid rgb(255, 0, 0);
position:fixed;
bottom:0;
}*/
/*Removed Mobile version support to allow visualization */<!DOCTYPE html>
<html>
<!-- dockmann -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Dockmann Web Services">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Paul Aranguren">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="parent">
<div class="one header">
<a class="tt" href="http://www.dockmann.com"><p class="title">DOCKMANN</p></a>
</div>
<!-- end header -->
<div class="one nav">
<ul class="nbar">
<li class="two home">
<a href="http://www.dockmann.com/">HOME</a>
</li>
<li class="two services">
SERVICES
</li>
<li class="two testimonials">
TESTIMONIALS
</li>
<li class="two portfolio">
PORTFOLIO
</li>
<li class="two contact">
CONTACT
</li>
</ul>
</div>
<!-- end nav -->
<div class="one banner">
<img class="people" src="image/macdesk.jpg" />
</div>
<!-- end banner -->
<div class="one boxOne">
<h2>Who we are...</h2>
<br />
</div>
<!-- end boxOne -->
<div class="one boxTwo">
<h2>Where we are</h2>
</div>
<!-- end boxTwo -->
<div class="one footer">
<p class="disc">
Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp",
"us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the <thead>
use of any product shown on this site. <br />This site is purely intended to provide the service mentioned in our page.
</thead>
Dockmann Corp. All rights reserved. ©2016
</p>
</div>
<!-- end footer -->
</div>
<!-- <button class="popup">
Night Vision!
</div> -->
</div>
</body>
</html>
答案 0 :(得分：1)
显示：flex和position：绝对/相对和固定不一起。
要固定标题和导航栏，请用div包装并设置其位置：fixed。我已经改变了你的标记
检查以下代码段
* {
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper {
width: 100%;
min-width: 960px;
margin: 0 auto;
/*display:flex;
align-items: flex-end;
this is just for the night vision button to position better
*/
}
.parent {
display: flex;
flex-wrap: wrap;
/*these two at the bottomr are optional to
center them on the page
max-width: 960px;
margin:0 auto;*/
max-width: 960px;
margin: auto;
}
.header-content {
position: fixed;
}
.content-2 {
position: absolute;
top: 170px;
}
/*WE MISSED THE .ONE SELECTOR*/
.one {
flex-grow: 1;
}
.title {
text-align: center;
position: relative;
font-size: 50px;
top: 20px;
}
.header {
height: 100px;
width: 100%;
order: 0;
border-bottom: 1px solid rgb(0, 0, 0);
align-self: flex-start;
}
.banner {
width: 100%;
min-width: 960px;
height: 500px;
color: white;
background-color: rgb(0, 0, 0);
order: 3;
}
.boxOne {
width: 45%;
min-width: 200px;
height: 300px;
border-right: 1px solid rgb(0, 0, 0);
order: 4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-left: 1px solid rgb(120, 120, 120);
text-align: justify;
}
.boxTwo {
width: 45%;
min-width: 200px;
height: 300px;
order: 4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-right: 1px solid rgb(120, 120, 120);
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0, 0, 0);
border-right: 1px solid rgb(120, 120, 120);
border-left: 1px solid rgb(120, 120, 120);
order: 5;
}
.nbar {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
align-items: stretch;
border-bottom: 1px solid rgb(0, 0, 0);
order: 1;
}
.two {
flex-grow: 0;
}
.home {
order: 1;
}
.services {
order: 2;
}
.testimonials {
order: 3;
}
.portfolio {
order: 4;
}
.contact {
order: 5;
}
li {
display: inline-flex;
padding: 10px 40px 10px 60px;
font-size: 15px;
/*border: 1px solid rgb(0,0,0);*/
/*text-align: center;
align-content: stretch;*/
justify-content: center;
background-color: white;
transition: background-color 0.08s linear;
}
li:hover {
color: white;
background-color: rgb(0, 0, 0);
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: rgb(255, 255, 255);
}
.tt:link {
text-decoration: none;
color: black;
}
.tt:visited {
text-decoration: none;
color: black;
}
.tt:hover {
text-decoration: none;
}
.disc {
padding-left: 5px;
padding-top: 5px;
font-size: 10px;
color: rgb(150, 150, 150);
}
.people {
overflow: hidden;
height: 500px;
width: 960px;
}
/*.popup {
background-color: white;
height: 20px;
width:90px;
border: 1px solid rgb(255, 0, 0);
position:fixed;
bottom:0;
}*/
/*Removed Mobile version support to allow visualization */<html>
<!-- dockmann -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Dockmann Web Services">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Paul Aranguren">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="parent">
<div class="header-content">
<div class="one header">
<a class="tt" href="http://www.dockmann.com">
<p class="title">DOCKMANN</p>
</a>
</div>
<!-- end header -->
<div class="one nav">
<ul class="nbar">
<li class="two home">
<a href="http://www.dockmann.com/">HOME</a>
</li>
<li class="two services">
SERVICES
</li>
<li class="two testimonials">
TESTIMONIALS
</li>
<li class="two portfolio">
PORTFOLIO
</li>
<li class="two contact">
CONTACT
</li>
</ul>
</div>
</div>
<div class="content-2">
<!-- end nav -->
<div class="one banner">
<img class="people" src="image/macdesk.jpg" />
</div>
<!-- end banner -->
<div class="one boxOne">
<h2>Who we are...</h2>
<br />
</div>
<!-- end boxOne -->
<div class="one boxTwo">
<h2>Where we are</h2>
</div>
<!-- end boxTwo -->
<div class="one footer">
<p class="disc">
Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp", "us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the
<thead>
use of any product shown on this site.
<br />This site is purely intended to provide the service mentioned in our page.
</thead>
Dockmann Corp. All rights reserved. ©2016
</p>
</div>
<!-- end footer -->
</div>
</div>
<!-- <button class="popup">
Night Vision!
</div> -->
</div>
</body>
</html>
希望有所帮助