Div 与下面的内容流血？

Posted 2023-03-07

【中文标题】Div 与下面的内容流血？

【英文标题】：Div with being bleed through with content underneath?

【发布时间】：2014-09-25 15:54:56

【问题描述】：

在this page 的右上角，我们可以看到我创建的“现在提问”按钮。我设置了背景颜色、背景图片和高 Z-Index，但下面的文本仍然在流血。

如何阻止这种情况？我不知道如何解决这个问题，甚至不知道为什么会这样......

 <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 [phone]</b>&nbsp;&nbsp;</p>
  <div id="ContactFormContainer" style="display: none;">
    Test
  </div>
 </div>

【参考方案1】：

问题在于#u181-4 元素的z-index 为6，而联系表格在其中；这限制了表单相对于整个页面的 z 顺序。

除非 #u181-4 需要 z-index，否则只需将其保留为 auto 即可正常工作。

【讨论】：

很好，我没有深入研究这个。除了引起问题的 ID 是#u4715。非常感谢，先生。

很高兴我能帮上忙 :-)