基本上我的问题是我已经将标题图像置于绝对位置，但结果是下面的div忽略了它的存在，这会产生不需要的重叠（所有文本都浮在灰色图像上）。在将绝对定位的div下方的div设置为绝对定位的div只是流量div中的正常值时，最明智的选择是什么？谢谢你的帮助。
https://jsfiddle.net/w6rrLkpu/
相关HTML（两个DIVS）
<body>
<!-- Start Nav -->
<div class="container-fluid" style="padding:0px;">
<nav class="navbar navbar-inverse" style="border-radius: 0%; margin: 0px">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/brand.jpg" class="navbar-brand" alt="" id="navbar-brand" >
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li style="padding-top: 12px; padding-bottom: 12px;" class="active"><a href="#">Home</a></li>
<li style="padding-top: 13px; padding-bottom: 13px;"><a href="#">How It Works</a></li>
<li style="padding-top: 13px; padding-bottom: 13px;"><a href="#">Get Started</a></li>
<li style="border:none; padding-bottom: 3px;"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- End Nav -->
<!-- Start Slider -->
<div class="container-fluid" style="padding: 0px; " >
<div class="video_holder">
<video autoplay loop width="100%">
<source src="img/woman.mp4" type="video/mp4">
</video>
</div>
<img src="img/taxes1.jpg" alt="fail" id="link">
<h1 class="new"> Let's Begin </h1>
<a href="#Get" class="phalse"><i class="fa fa-arrow-down fa-3x" aria-hidden="true"></i></a>
</div>
<!-- End Slider -->
<!-- Start About -->
<div style="padding-top: 7%; padding-bottom: 8%;" class="container-fluid " id="About">
<div class="row">
<div class="text-center col-sm-12 col-lg-12">
<h1 style="padding-bottom: 2%"> About Us </h1>
</div>
</div>
<div class="row">
<div class="text-center col-sm-12 col-lg-12">
<h3 style="margin-top: 1%; line-height: 150%;"> We are a company that makes the complicated process of calculating taxes extremely simple. We have experts that use specialized applications to calculate how much tax money you <strong>really</strong> owe. Save time, money, and frustration by filing with <em>StateAndCityTaxes</em>.</h3>
</div>
</div>
</div>
<!-- End About -->
所有CSS
/* ---- Start General ---- */
html, body {
width: 100%;
height: 100%;
}
body {
font-family: 'Muli', sans-serif;
}
footer {
background-color: black;
color: white;
height: 8%;
width: 100%;
text-align: center;
padding-top: 1.5%;
}
/* ---- End General ---- */
/* --- Start Navigation --- */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
margin-left: 10px;
width: auto;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
.navbar {
background-color: white;
padding-bottom: .09%;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: black;
}
.navbar-inverse .navbar-nav>li{
padding-top: 3%;
}
.nav .active a {
background:white!important;
}
.navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
color: black;
text-decoration: underline;
}
.nav.navbar-nav.navbar-right li a {
color: black;
font-weight: bold;
}
.navbar.navbar-inverse .navbar-nav>li {
border-bottom: solid 1px;
border-color: black;
text-align: center;
}
.nav > li > a:focus,
.nav > li > a:hover
{
text-decoration: underline;
}
/* --- End Navigation --- */
/* --- Start Slider --- */
video {
display: none;
}
#link {
margin: 0px;
padding:0px;
}
/* --- End Slider --- */
/*--- Media Query ---*/
/*--- Media Query ---*/
/* Extra Small Devices, Phones A.K.A Drop Down Menu */
@media only screen and (min-width : 280px) and (max-width: 767px) {
/*--- Navigation ---*/
#link {
margin: 0px;
padding:0px;
height: 400px;
width: 100%;
object-fit: cover;
position: absolute;
}
.new {
position: relative;
font-weight: bold;
top: 240px;
left: 40%;
color: black;
}
.fa-arrow-down {
position: relative;
top: 270px;
left: 50%;
color: white;
}
/*--- Navigation ---*/
/*--- About --- */
.img-responsive {
}
/*--- About --- */
}
答案 0 :(得分：0)
我会尝试将所有其他元素包装到div中，然后将适当的边距放到该div。由于你正在使用Bootstrap的navbar，你可以在身体上添加一个填充，如here：
body {
padding-top: 70px;
}