CSS to avoid transparent background for absolute position div

Question

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.

Need solution for css. Sample given ->

$(document).ready(
    function() {
        $("#hover").hover(function() {
            $("#message").toggle();
        });
    });

#message {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #888888;
    position:absolute;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"id="hover" >Click Here</a>
<div id="message">
  <b>Hidden Content</b>
  <br/>This is a very large content which overlaps the content at background.<br/><br/>So the content in background should not be seen.
</div>
<div>This is another text whose content should be hidden under the popup.</div><br/>
<div>One more text added whose content is visible even if the hidden content is visible.</div>

Answer 1

I have updated your code by adding Z-index and background-color. Hope this is what you are looking for.

$(document).ready(
    function() {
        $("#hover").hover(function() {
            $("#message").toggle();
        });
    });

#message {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #888888;
    position:absolute;
    display:none;
z-index:9;
background:#fff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"id="hover" >Click Here</a>
<div id="message">
  <b>Hidden Content</b>
  <br/>This is a very large content which overlaps the content at background.<br/><br/>So the content in background should not be seen.
</div>
<div class="setPosition">This is another text whose content should be hidden under the popup.</div><br/>
<div>One more text added whose content is visible even if the hidden content is visible.</div>