title: Div dropdown menu overlaying other content
body: <p>I'm trying to make it so that when you click an icon in a div, there is a dropdown box that shows up and overlays the div's content.  But right now, my dropdown box is simply pushing down the div's content, rather than overlaying it.  After browsing similar questions on this site, I'm almost certain the problem is in my CSS having to make some elements position:relative and other elements position: absolute, but I've been playing with it for a while and can't seem to get it to work properly.  Below is a clean version of my code (without the various position attempts).</p>
  
  <p>The relevant CSS code is:</p>
  
  <pre><code>#ideas_box {
      display: inline-block;
      *display: inline;
      background-color: white;
      min-width: 1110px;
  
      overflow: hidden;
      margin: 0px 20px 20px 20px;
  
      border: solid 1px #6a6a6a;
      box-shadow: 3px 3px 3px #cecdcd;
      -moz-box-shadow: 3px 3px 3px #cecdcd;
      -webkit-box-shadow: 3px 3px 3px #cecdcd;
  }
  
  #ideas_box_majority_bar_green{
      display: inline-block;
      *display: inline;
      float: left;
      width: 10px;
      margin-bottom: -1000px;  /* for making green bar as large as parent div */
      padding-bottom: 1000px; /* for making green bar as large as parent div */
      background-color: #a8fba6;
  }
  
  #ideas_box_main_content {
      display: inline-block;
      *display: inline;
      float: left;
      width: 100%;
      margin: 10px 0px 10px 20px;
  }
  
  #ideas_box_top {
      display: inline-block;
      *display: inline;
      float: left;
      width: 100%;
      overflow: hidden;
  }
  
  #ideas_box_top_image {
      display: inline-block;
      *display: inline;
      float: left;
      width: 60px;
  }
  
  #ideas_box_top_titlebar {
      display: inline-block;
      *display: inline;
      float: left;
  }
  
  #ideas_box_top_titlebar_title {
      display: inline-block;
      *display: inline;
      float: left;
      width: 100%;
      padding: 5px 0px 0px 0px;
      color: #060708;
      font-family: "Arial";
      font-size: 150%;
  }
  
  #ideas_box_top_titlebar_postInfo {
      display: inline-block;
      *display: inline;
      float: left;
      width: 100%;
      color: #363636;
      font-family: "Arial";
      font-style: italic;
      font-size: 80%;
  }
  
  #ideas_box_top_iconBar {
      display: inline-block;
      *display: inline;
      float: right;
      width: 150px;
      padding-right: 30px;
  }
  
  #ideas_box_top_iconBar_comment {
      display: inline-block;
      *display: inline;
      float: left;
      width: 50px;
      text-align: center;
      color: #060708;
      font-family: "Arial";
  }
  
  #ideas_box_top_iconBar_thumbsUp {
      display: inline-block;
      *display: inline;
      float: left;
      width: 50px;
      text-align: center;
      color: #060708;
      font-family: "Arial";
  }
  
  #ideas_box_top_iconBar_thumbsDown {
      display: inline-block;
      *display: inline;
      float: left;
      width: 50px;
      text-align: center;
      color: #060708;
      font-family: "Arial";
  }
  
  #ideas_box_content {
      float: left;
      overflow: hidden;
      color: black;
      font-family: "Arial";
      font-size: 100%;
      margin-right: 40px;
  }
  
  
  #comments_dropDown_box_point {
      display: none;
  
      width: 20px;
      height: 14px;
      position: relative;
  
      left: 13px;
      top: 3px;
  
      background:url('../img/box_point.png'); 
  
      z-index: 10;
  }
  
  #comments_dropDown_box {
      display: none;
  
      position: relative;
      width: 70px;
      color: black;
      background-color: white;
      border: solid 1px #C2C2C2;
      overflow: auto;
  
      left: -13px;
      top: 2px;
  
      z-index: 9;
  
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-top-right-radius:6px;
      -webkit-border-top-left-radius:6px;
      -webkit-border-bottom-left-radius:6px;
      -webkit-border-bottom-right-radius:6px;
  
      border: solid 1px #C2C2C2;
      box-shadow: 3px 3px 3px #cecdcd;
      -moz-box-shadow: 3px 3px 3px #cecdcd;
      -webkit-box-shadow: 3px 3px 3px #cecdcd;
  }
  
  #comments_dropDown_box .comments_dropDown_row {
      float: left;
      width: 100%;
      overflow: auto;
      text-align: center;
      padding: 5px 0px 5px 0px;
      font-style: italic;
  }
  
  #comments_dropDown_box .dropDown_divider {
      float: left;
      width: 100%;
      height: 2px;
      background-color: #dfdede;
  }
  </code></pre>
  
  <p>The HTML code is:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;meta http-equiv="Content-Type" content="application/xml; charset=utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
      &lt;!-- JQUERY --&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/scripts_ideaboard.js"&gt;&lt;/script&gt;
  
      &lt;!-- CSS --&gt;
      &lt;link type="text/css" href="css/ideaboard.css" rel="stylesheet"  media="screen"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- LIST --&gt;
      &lt;div id="ideas_box"&gt;
          &lt;div id="ideas_box_majority_bar_green"&gt;&lt;/div&gt;
          &lt;div id="ideas_box_main_content"&gt;
              &lt;div id="ideas_box_top"&gt;
                  &lt;div id="ideas_box_top_image"&gt;&lt;/div&gt;
                  &lt;div id="ideas_box_top_titlebar"&gt;
                      &lt;div id="ideas_box_top_titlebar_title"&gt;Test&lt;/div&gt;
                      &lt;div id="ideas_box_top_titlebar_postInfo"&gt;Test on Aug 09 2017, 08:37:58pm&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="ideas_box_top_iconBar"&gt;
                      &lt;div id="ideas_box_top_iconBar_comment"&gt;
                          &lt;img src="img/comments.jpg" style="height: 40px; width: 40px;"&gt;&lt;br&gt;
                          +8
                          &lt;!-- display drop down for comments --&gt;
                              &lt;div id="comments_dropDown_box_point"&gt;&lt;/div&gt;
                              &lt;div id="comments_dropDown_box"&gt;
                                  &lt;div class="comments_dropDown_row"&gt;
                                      User1
                                  &lt;/div&gt;
                                  &lt;div class="dropDown_divider"&gt;&lt;/div&gt;
                                  &lt;div class="comments_dropDown_row"&gt;
                                      User2
                                  &lt;/div&gt;
                                  &lt;div class="dropDown_divider"&gt;&lt;/div&gt;
                                  &lt;div class="comments_dropDown_row"&gt;
                                      User3
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;!-- END display drop down for comments --&gt;
                      &lt;/div&gt;
                      &lt;div id="ideas_box_top_iconBar_thumbsUp"&gt;
                          &lt;img src="img/like.jpg" style="height: 40px; width: 40px;"&gt;&lt;br&gt;
                          +3
                      &lt;/div&gt;
                      &lt;div id="ideas_box_top_iconBar_thumbsDown"&gt;
                          &lt;img src="img/dislike.jpg" style="height: 40px; width: 40px;"&gt;&lt;br&gt;
                          -2
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="ideas_box_content"&gt;
              This is a test
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- LIST --&gt;
      &lt;div id="ideas_box"&gt;
          &lt;div id="ideas_box_majority_bar_green"&gt;&lt;/div&gt;
          &lt;div id="ideas_box_main_content"&gt;
              &lt;div id="ideas_box_top"&gt;
                  &lt;div id="ideas_box_top_image"&gt;&lt;/div&gt;
                  &lt;div id="ideas_box_top_titlebar"&gt;
                      &lt;div id="ideas_box_top_titlebar_title"&gt;Test&lt;/div&gt;
                      &lt;div id="ideas_box_top_titlebar_postInfo"&gt;Test on Aug 09 2017, 08:37:58pm&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="ideas_box_top_iconBar"&gt;
                      &lt;div id="ideas_box_top_iconBar_comment"&gt;
                          &lt;img src="img/comments.jpg" style="height: 40px; width: 40px;"&gt;&lt;br&gt;
                          +8
                          &lt;!-- display drop down for comments --&gt;
                              &lt;div id="comments_dropDown_box_point"&gt;&lt;/div&gt;
                              &lt;div id="comments_dropDown_box"&gt;
                                  &lt;div class="comments_dropDown_row"&gt;
                                      User1
                                  &lt;/div&gt;
                                  &lt;div class="dropDown_divider"&gt;&lt;/div&gt;
                                  &lt;div class="comments_dropDown_row"&gt;
                                      User2
                                  &lt;/div&gt;
                                  &lt;div class="dropDown_divider"&gt;&lt;/div&gt;
                                  &lt;div class="comments_dropDown_row"&gt;
                                      User3
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;!-- END display drop down for comments --&gt;
                      &lt;/div&gt;
                      &lt;div id="ideas_box_top_iconBar_thumbsUp"&gt;
                          &lt;img src="img/like.jpg" style="height: 40px; width: 40px;"&gt;&lt;br&gt;
                          +3
                      &lt;/div&gt;
                      &lt;div id="ideas_box_top_iconBar_thumbsDown"&gt;
                          &lt;img src="img/dislike.jpg" style="height: 40px; width: 40px;"&gt;&lt;br&gt;
                          -2
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="ideas_box_content"&gt;
              This is a test
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>The JS code is:</p>
  
  <pre><code>$(document).ready(function() {
  
      $("#ideas_box_top_iconBar_comment").click(function()
      {
          $("#comments_dropDown_box").toggle();
          $("#comments_dropDown_box_point").toggle();
      });
  
  
  });
  </code></pre>
  
  <p>A live version is here:  <a href="http://quickid.net/test/ideaboard.html" rel="nofollow noreferrer">http://quickid.net/test/ideaboard.html</a>  (click comment icon in first post)</p>
  
  <p>Any help would be very much appreciated.</p>