Div with being bleed through with content underneath?

Question

On this page, top-right, we can see the button that I've created "ask a question now". I set the background color, background image, and high Z-Index and yet, still the text underneath is being bled through it.

How to stop this? I have no idea how to solve this, or even why this is happening...

 <div class="clearfix grpelem" id="u181-4"><!-- content -->
<style>
    #ContactButton {
        margin-bottom: 5px;
    }

    #ContactButtonContainer {
        margin-top: -50px;
        position: relative;
    }

    #ContactFormContainer {
        width: 250px;
        height: 160px;
        border: 1px solid black;
        position: absolute;
        top: -5px;
        left: -52px;
        z-index: 1001;
        background-color: #fff;
        background-image: url("images/formbg.jpg");
        background-repeat: repeat;
    }
</style>
<script>
    function ToggleContactFormContainer() {
        var FormContainer = document.getElementById("ContactFormContainer");

        if(FormContainer.style.display == "none") {
            FormContainer.style.display = "block";
        }
        else {
            FormContainer.style.display = "none";
        }
    }
</script>
  <p id="ContactButtonContainer"><img src="images/ContactButton.jpg" id="ContactButton" onclick="ToggleContactFormContainer()"><br><b>CALL US TODAY (219) 221-6500</b>&nbsp;&nbsp;</p>
  <div id="ContactFormContainer" style="display: none;">
    Test
  </div>
 </div>

Answer 1

The problem is that the #u181-4 element has a z-index of 6 and the contact form is inside it; that constrains the z-order of the form relative to the page overall.

Unless the #u181-4 needs to have a z-index, just leave it at auto and it will work correctly.