Home/ Questions/Q 4031596
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T11:37:00+00:00

I’m using an absolutely positioned div to cover/mask another component and it works well

  • 0

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 button) 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0