[英]Div with being bleed through with content underneath?
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. 我设置了背景颜色,背景图像和较高的Z索引,但是下面的文本仍在通过其中流血。
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> </p>
<div id="ContactFormContainer" style="display: none;">
Test
</div>
</div>
The problem is that the #u181-4 element has a z-index of 6 and the contact form is inside it; 问题是#u181-4元素的z索引为6,并且接触形式在其中。 that constrains the z-order of the form relative to the page overall. 限制了表单相对于整个页面的z顺序。
Unless the #u181-4 needs to have a z-index, just leave it at auto and it will work correctly. 除非#u181-4需要具有z-index,否则将其保留为auto即可正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.