Div с истечением кровью с содержимым внизу?

Question

На странице this page, справа вверху, мы можем увидеть кнопку, которую я создал, «задайте вопрос сейчас». Я устанавливаю цвет фона, фоновое изображение и высокий Z-индекс, и тем не менее, текст под ним проходит через него.

Как остановить это? Я понятия не имею, как решить эту проблему, или даже, почему это происходит ...

<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

Проблема заключается в том, что элемент # u181-4 имеет Z-индекс 6 и контактную форму внутри него; что ограничивает z-порядок формы относительно общей страницы.

Если у u181-4 должен быть z-индекс, просто оставьте его на авто, и он будет работать правильно.