title: How can I put <div> over another <div> and insert a rectangle under an image?
body: <h2>Q1</h2>
  
  <p>How I can put an image in the center over a background image? </p>
  
  <p>I'm trying to put the image <code>&lt;div class="shape"&gt;&lt;/div&gt;</code> over the image <code>&lt;div class="hero"&gt;&lt;/div&gt;</code> within the center. What coding can I add to move it up and down to my needs?</p>
  
  <h2>Q2</h2>
  
  <p>Below the <code>&lt;div class="shape"&gt;&lt;/div&gt;</code> image I want to put a rectangle shape box below within the center. Within this CSS what code do I need to add to for me to move the shape up and down. Furthermore, within the CSS would I use <code>height:;</code> &amp; <code>width:;</code> to change the height/width of the box?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;body&gt;
          &lt;nav class="navbar navbar-default navbar-fixed-top"&gt; 
              &lt;div class="container-fluid"&gt;
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="#"&gt;&lt;img src="http://placehold.it/60x60" alt="Your Brand Name"&gt;&lt;/a&gt;
                      &lt;h1 class="nav-title"&gt;Liam Docherty's Digital Portfolio&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="dropdown"&gt;
                                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"&gt;About Me &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#section3"&gt;Contact&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li class="dropdown"&gt;
                                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Units &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;
                                      &lt;/li&gt;
  
                                      &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                                      &lt;/li&gt;
  
                                      &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#contact-me"&gt;Contact Me&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
                      &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
          &lt;/nav&gt;
  
  
      &lt;section id="section1" class="section1"&gt;
        &lt;div class="shape"&gt;&lt;/div&gt;
        &lt;div class="hero"&gt;&lt;/div&gt;
  
  
        &lt;a href="#section2"&gt;&lt;i class="fa fa-angle-down" style="font-size:100px;"&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;/section&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;style&gt;
      body {
        margin: 0;
        padding: 0;
      }
      .navbar.navbar-default {
        background-color: #4D5061;
        height: 10vh;
        z-index: 100;
      }
      .navbar.navbar-default ul {
        list-style-type: none;
        text-align: right;
      }
      .navbar.navbar-default ul li {
        display: inline-block;
      }
      .dropdown-menu li { 
          text-align:center 
      }
      .dropdown .dropdown-menu {
        background-color: #4D5061;
      }
      .dropdown .dropdown-menu a {
        color: white;
      }
      .navbar.navbar-default ul li a {
        display: inline-block;
        padding: 3.5vh 8px 4px;
        color: white;
        text-decoration: none;
        font-size: 14pt;
        font-family: 'Roboto', sans-serif;
      }
      .navbar.navbar-default ul li:after {
        content: '';
        position: absolute;
        right: 50%;
        bottom: 0;
        left: 50%;
        height: 3px;
        background-color: #FFFFFF;
        border-radius: 9px;
        transition: all .2s;
      }
      .navbar.navbar-default ul li a:hover {
        color: white;
      }
      .nav.navbar-nav,
      .nav.navbar-nav&gt;li {
        float: none;
      }
      .navbar.navbar-default ul li:hover:after {
        right: 0;
        left: 0;
      }
      .nav&gt;li&gt;a:hover {
      background-color: rgba(17, 17, 17, 0.2);
      }
      #logo {
        padding-top: 2vh;
        padding-left: 20px;
        float: left;
      }
      .shape {
        content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
        border-radius: 25px;
        background:darkgrey;
        color:white;
        padding:3px;
        margin:50px auto 0 auto;
        width:150px;
        height:150px;
      }
      .hero {
        background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
        background-attachment: fixed;
        position:absolute;
        width: 100%;
        width: 100vw;
        height: 100%;
        height: 70vh;
      }
      section {
        position: relative;
        height: 95vh;
      }
      .section1 {
        height: 100vh;
        text-align: center;
        color: white;
      }
      .section2 {
        //height: 95vh;
        background-color: #11B5E4;
        text-align: center;
        color: white;
      }
      .section3 {
        //height: 95vh;
        background-color: #EDF7F6;
        text-align: center;
        color: white;
      }
      .fa-angle-down {
        color: #4D5061;
        position: absolute;
        bottom: 0px;
      }
      .fa-angle-up {
        color: #4D5061;
        position: absolute;
        bottom: 0px;
      }
      .footer {
        height: 5vh;
        background-color: #4D5061;
        text-align: center;
        padding:0;
        right:0;
        bottom:0;
        left:0:
      }
      .nav-title {
        font-size: 14pt;
        margin:0;
        top: 32px;
        left: 50px;
        width: 100%;
        position: absolute;
        text-align: center;
        color: white;
        font-family: 'Roboto', sans-serif;
      }
      .navbar.navbar-default ul.dropdown-menu li,
      .navbar.navbar-default ul.dropdown-menu li a {
        position: relative;
        display: block;
      }
      &lt;/style&gt;
  </code></pre>