rizkibatam rizkibatam - 5 days ago 6
CSS Question

CSS Position Absolute Make Behind Element Cannot be Use

i have a problem like this.



#relative{
position:relative;
width:100%;
height:100%;
text-align:center;
}
button{
margin:10px auto;
width:200px;
height:auto;
border:1px solid;
border-radius:5px;
}
#absolute{
position: absolute;
top: 0;
left:0;
height: 250px;
width: 100%;
border: solid 1px #000000;
color: blue;
font-weight: bold;
padding-top: 60px;
/*opacity:0;*/
}
button:hover{
background-color:#eed5a4;
}

<div id="relative">
<button>
Hover me if you can.
</button>
<div id="absolute">
Absolute its me dude!!<br>
If me >> opacity:0<br>
Button still cant be hover.
</div>
</div>





Any solution for this, and i dont know to use the good english language
Note : button keep like this, do not change the position absolute too.
- my english so bad :(

Answer

Add position:relative; and a higher z-index than that of the #absolute div to the button itself, like so:

HTML

<button id="relative-button">Hover me if you can.</button>

CSS

#absolute { z-index:1 }

#relative-button { position:relative; z-index:2 } 
Comments