0
我正在努力使.header和.nav始終保持在一個固定的位置;有效地使它們不會從視口中消失。如何讓.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>