Absolute overlay <div> doesn't cover relatively positioned elements_问答_开发者

Absolute overlay <div> doesn't cover relatively positioned elements

开发者 https://www.devze.com 2023-02-15 05:59 出处：网络

I\'m using an absolutely positioned div to cover/mask another component and it works well except when one of those components is an element using certain display styles, like relative.When that\'s the

相关专题：css

I'm using an absolutely positioned div to cover/mask another component and it works well except when one of those components is an element using certain display styles, like relative. When that's the case, the element (like an image butto开发者_开发知识库n) is not masked and can still be interacted with, which is what I'm trying to avoid. This quick example code demonstrates the issue. Is there an easy way to make sure the "mask" div covers everything regardless of how it's positioned? I tried playing with Z-index but it doesn't seem to apply in this scenario.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head><title>Example</title></head>
    <body>
        <div style="height:200px; width:400px; background-color:green;">
            <div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-color:black; opacity:0.5;"></div>
            Test<br />
            <input type="image" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="position:relative; top:25px;" />
        </div>
    </body>
</html>

Look this Fiddle

Note:

set position relative to wrapper div
set overlay width, height size
set z-index for elements (where you want to use z-index, you need to define position)

What browser id this an issue in? I would try using this CSS first and then compare results in IE and FF

div {
position:relative;
z-index:1;
height:200px;
width:400px; 
background-color:green;
}

div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}

div div input {
position:relative;
top:25px;
z-index:1;
}

There's a helpful resource to address this issue.

Long story short, if your absolutely placed div (.abs) is empty, IE doesn't like to place it in front of other elements regardless of z-index. You can use a 1x1 transparent gif to overcome this, eg. by adding the following style to the div:

   background: transparent url('/images/clear.gif') repeat 0 0;

I've found this to help. It's great as there's very little additional styling needed and you don't have to explicitly manage z-indices as with other answers here.

Note: You may need to move the absolutely placed div to be the last element in the parent container.