title: CSS to avoid transparent background for absolute position div
body: <p>I have a div which hide/display on hover. The position set is absolute so background of div becomes transparent. If position set to relative then the parent div height is affected on hover. So how can the background made block so the content is not visible.</p>
  
  <p>Need solution for css.
  Sample given -></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>$(document).ready(
      function() {
          $("#hover").hover(function() {
              $("#message").toggle();
          });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#message {
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 10px #888888;
      position:absolute;
      display:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#"id="hover" &gt;Click Here&lt;/a&gt;
  &lt;div id="message"&gt;
    &lt;b&gt;Hidden Content&lt;/b&gt;
    &lt;br/&gt;This is a very large content which overlaps the content at background.&lt;br/&gt;&lt;br/&gt;So the content in background should not be seen.
  &lt;/div&gt;
  &lt;div&gt;This is another text whose content should be hidden under the popup.&lt;/div&gt;&lt;br/&gt;
  &lt;div&gt;One more text added whose content is visible even if the hidden content is visible.&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>