我页面上的每个div都相互重叠。我的网站在bootstrap 3.3.7上运行。
该网站正在显示网站顶部标题上方的所有内容（在导航栏上）。在导航栏下还有一个图像可能就是问题。
body {
min-height: 2000px;
}
/* Header */
.line-1 {
position: relative;
top: 50%;
width: 24em;
margin: 0 auto;
border-right: 2px solid rgba(255, 255, 255, .75);
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter {
animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter {
from {
width: 0;
}
to {
width: 19.2em;
}
}
@keyframes blinkTextCursor {
from {
border-right-color: rgba(255, 255, 255, .75);
}
to {
border-right-color: transparent;
}
}
header {
position: absolute;
width: 100%;
height: 100%;
color: white;
background: rgba(28, 36, 65, 0.93);
background: url('../img/head.png');
background-size: cover;
clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
header .table {
display: table;
height: 100%;
}
header .container {
height: 100%;
}
header .header-text {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
header .typed {
display: inline-block;
margin: 0;
}
header .typed-cursor {
font-size: 60px;
display: inline-block;
margin: 0 10px;
color: #00a8ff;
-webkit-animation-name: flash;
animation-name: flash;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* Navbar */
.navbar-default {
background-color: #242c43;
border-color: #242c43;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #0ca8fd;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav>li>a {
color: #ecf0f1;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #0ca8fd;
}
.navbar-default .navbar-nav>li>.dropdown-menu {
background-color: #242c43;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li>a {
color: #ecf0f1;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li.divider {
background-color: #242c43;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
.navbar-default .navbar-toggle {
border-color: #242c43;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #242c43;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #0ca8fd;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color: #0ca8fd;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Olesandr Kapitula</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- End of navbar -->
<!-- Header image -->
<header>
<div class="container">
<div class="table">
<div class="header-text">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="light white line-1 anim-typewriter">HTML/CSS/JS/PHP WEBDEVELOPMENT</h3>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- End of header image -->
<!-- Panels -->
<section>
<div class="container">
<div class="row">
<p>text</p>
</div>
</div>
</section>
<!-- End of panels -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
RAW Paste Data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Olesandr Kapitula</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- End of navbar -->
<!-- Header image -->
<header>
<div class="container">
<div class="table">
<div class="header-text">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="light white line-1 anim-typewriter">HTML/CSS/JS/PHP WEBDEVELOPMENT</h3>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- End of header image -->
<!-- Panels -->
<section>
<div class="container">
<div class="row">
<p>text</p>
</div>
</div>
</section>
<!-- End of panels -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>