0
基本上我的问题是我已经将头像定位在绝对位置，但是结果是下面的div忽略了它的存在，从而产生了不需要的重叠（所有文字都浮在灰色图像上）。如果让div低于绝对定位的div，就好像绝对定位的div只是流式div中的正常值，那么最明智的选择是什么？谢谢你的帮助。如何使元素对绝对定位的元素有反应，好像它不是绝对定位
https://jsfiddle.net/w6rrLkpu/
RELEVANT HTML（THE两个div）
<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 --- */
}
只需添加'padding'或'margin'下面的元素来填充下面的绝对定位的空间元件。或者将其定位为“相对”，因为这基本上就是它的目的 – giorgio