title: Why is my image floating above my dropdown menu
body: <p>I'm trying to figure out why my drop-down nav bar that's titled "players" is going behind my image. I tried setting the z-index of the "top" class to  = "2" and my image elements to = "1" but that didn't work. </p>
  
  <p>Is it something involving the absolute positioning? Why isn't my dropdown menu floating above it? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function slow(){
      document.getElementsByClassName("tracy")[0]
      .style.opacity = 0;
      var tracy1 = document.createElement("img");
      tracy1.src = "https://cdn5.kicksonfire.com/wp-content/uploads/2015/08/TRACY-MCGRADY-WAS-IN-CHINA-TO-RE-LAUNCH-THE-ADIDAS-T-MAC-5-4.jpg?x77385";
      tracy1.style.width = "175px";
      tracy1.style.height = "220px";
      tracy1.style.opacity = 0;
      tracy1.style.float = "left";
      tracy1.style.marginLeft = "10px";
      tracy1.className = "fade-img";
      document.getElementsByClassName("img-container")[0]
      .appendChild(tracy1);
      setTimeout(function(){tracy1.style.opacity = 1;},0);
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
  }
  
  header, nav, section, aside, footer, article {
    display: block;
  }
  
  body {background-image: url(backwood.png);}
  
  .container {
    margin:0 auto;
    background-color: #f7f7f7;
    background-size: cover;
    width: 1300px;
    padding-top:5px;
    height: 100%;
  }
  
  header {
    margin:0 0 2px;
    border-bottom: 2px groove #ffae00;
  }
  
  header h1 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: #f4ca1f;
    background:linear-gradient(to right, #5092f4, #f29641);
  }
  
  .nba {margin-right: 10px;}
  
  .thenav {
    background-color: #3b63d3;
    height: 85px;
    opacity: 0.9;
    position: relative;
    border-bottom-radius: 5px;
  }
  
  .logo {float: left;}
  .top {
    position: relative;
    z-index: 2;
  }
  .top ul {
    padding: 0;
    margin: 0;
  }
  
  .top ul li {
    float: left;
    background-color: #3b63d3;
    width: 90px;
    text-align: center;
    border-right: 1px groove #141e38;
    position: relative;
  }
  
  .top ul li a {
    display: block;
    color: white;
    font-weight: bold;
    padding: 33px 10px;
  }
  
  .top ul li a:hover {
    background-color: #47e586;
    -webkit-transition: all 0.90s;
    -moz-transition: all 0.90s;
    transition: all 0.90s;
  }
  
  .top li ul li a {
    padding: 8px;
    text-align:center;
  }
  
  .top li ul li{
    background-color: #6db8f2;
    border: 4px groove grey;
    border-radius: 4px;
    opacity: 1;
    background-color:#f76778;
    position: relative;
  }
  .top li ul li{background-color:#f76778;}
  .top li ul li:nth-child(1)  a:hover {background-color: blue;}
  .top li ul li a:hover{background-color: red;}
  
  .top ul li ul {display: none;}
  .top li:hover ul{position:absolute;}
  .top li:hover ul{display: block;}
  
  
  .userlogin {
    font-size: 12px;
    position: absolute;
    top:2px;
    left: 1330px;
    color: white;
  }
  
  input[type=text], input[type=password] {
    font-weight: bold;
    margin: 0;
    font-size: 8px;
    height: 10px;
    padding: 3px 5px;
    color: 162354;
  }
   
  .stat input[type=button] {
    background-color: #6cd171;
    color: blue;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    float: left;
    margin: 20px 0 0 20px;
    padding: 2px;
    font-family: Verdana, Geneva, sans-serif;
  }
  
  .log[type=button] {
    background-color: white;
    color: #008cff;
    border-radius: 4px;
    font-weight: bold;
    border: none;
    padding: 1px 2px 2px 2px;
    position: relative;
    left: 5px;
    top: 3px;
  }
  
  .tracy {
    float: left;
    margin: 0 10px;
    position: relative;
  }
  .img-container{
    float: left;
    height: 220px;
    width: 206px;
    position: relative;
  }
  
  .fade-img {
    float: left;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    -webkit-transition: opacity 2s ease-out;
    -moz-transition: opacity 2s ease-out;
    transition: opacity 2s ease-out;
    transition-delay: 1s;
  }
  
  .main {
    background-color: #f7f4f4;
    margin-right: 480px;
    margin-left: 20px;
    box-shadow: 10px 10px 10px #1f2963;
    border-radius: 12px;
    padding-bottom: 20px;
    overflow: auto; 
  }
  
  .tmacLogo {
    position: relative;
    top: 12px;
    left: 10px;
  }
  
  hr {margin-bottom: 8px;}
  .main h1 {
    text-align: center;
    background-color: white;
    padding-bottom: 10px;
    color: #3f3c3c;
    text-shadow: 2px 3px 2px #ff2b4b;
    font-size:30px;
    letter-spacing: 2.5px;
  }
  .main p {padding: 2px 5px 0;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;header&gt;
          &lt;h1 id="box" onload="changed()"&gt;&lt;image src="nbaone.png" width="40px" height="55px" class="nba"&gt;NBA Legends&lt;/h1&gt;
          &lt;div class="thenav" onload="changed()"&gt;
  
              &lt;nav class="top"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://www.nba.com"/&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li onclick="changeP()"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Players&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li onmouseover="slow()"&gt;&lt;a href="#"/&gt;T-Mac &lt;img src="tmaclogo.png" width="10px" height="10px"&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#kobesec"/&gt;Kobe&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"/&gt;Kevin Durant&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"/&gt;The Goat&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li onclick="slow()"&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;div class="userlogin"&gt;
                      &lt;form action="/action_page.php"&gt;
                          Username&lt;br&gt;
                          &lt;input type="text" name="User" maxlength="20"/&gt;
                          &lt;/br&gt;
  
                          Password &lt;/br&gt;
                          &lt;input type="Password" name="User"/&gt;
                          &lt;input type="button" onclick="x('green','80px')" value="Login" class="log"/&gt; 
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
    
      &lt;div class="main"&gt;
          &lt;h1 onmouseover="changeStyle()"&gt;T-Mac &lt;img src="tmaclogo.png" alt="TmaC" width="55px" height="42px" class="tmacLogo"/&gt;&lt;/h1&gt;
          &lt;hr style="color:red;"&gt;
          &lt;div class="img-container"&gt;
              &lt;img src="http://i.imgur.com/1yiEfva.jpg" alt="TmaC" width="175px" height="220px" onclick="slow()" class="tracy fade-img"&gt;
          &lt;/div&gt;
          &lt;p&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release &lt;/p&gt;       
      &lt;/div&gt; 
   
      &lt;div class="stat"&gt;
          &lt;input type="button" value="Stats" onclick="newText()"&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is an image of whats i dont understand: </p>
  
  <p><a href="https://imgur.com/uwySgnl" rel="nofollow noreferrer">http://imgur.com/uwySgnl</a></p>