0
基本的に私の問題は、絶対に配置されたヘッダー画像を作成したことですが、下のdivはその存在を無視して不要なオーバーラップ（すべてのテキストがグレーのイメージ上に浮いています）。絶対配置されたdivの下にあるdivを、絶対配置されたdivがフローdivの通常のものであるかのように動作させるという点で最も賢明なオプションは何ですか？助けてくれてありがとう。絶対配置された要素に要素を反応させる方法
https://jsfiddle.net/w6rrLkpu/
RELEVANT HTML（TWO 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 -->
私はdiv要素に他のすべての要素をラップしようと
/* ---- 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