How to make an element react to an absolutely positioned element as if it were not absolutely positioned

Basically my issue is that I have made a header image absolutely positioned, but as a result the divs below are ignoring its presence which creates an unwanted overlap (all the text is floating over the grey image) . What would be the wisest option in terms of getting the divs below the absolutely positioned div to act as if the absolutely positioned div were just a normal in flow div? Thanks for any help.

https://jsfiddle.net/w6rrLkpu/

RELEVANT HTML (THE 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 -->

ALL 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 --- */

    }

Answers 1

  • I would try to wrap all the other element to a div, then put the appropriate margin to that div. And since you're using the navbar of Bootstrap, you could add a padding to the body, like here:

    body {
        padding-top: 70px;
    }
    

Related Articles