Позиция CSS Absolute Make Behind Element не может использоваться

Question

У меня есть проблема.

#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>

Любое решение для этого, и я не знаю, чтобы использовать хороший английский язык Примечание: кнопку держать, как это, не изменить положение абсолютного тоже. - мой английский так плохо :(

Answer 1

Добавить position:relative; и выше z-index чем #absolute дел до самой кнопки, например, так:

HTML

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

CSS

#absolute { z-index:1 } 

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

Answer 2

заменить кнопку CSS, как это

button { 
    border: 1px solid; 
    border-radius: 5px; 
    height: auto; 
    margin: 10px auto; 
    position: relative; /* newly added */ 
    width: 200px; 
    z-index: 9; /* newly added */ 
} 

Answer 3

Благодаря @daniel Лисик, вы удивительный человек. Чрезвычайный

#relative{ 
 
    position:relative; 
 
    width:100%; 
 
    height:100%; 
 
    text-align:center; 
 
} 
 
button{ 
 
    position:relative; 
 
    z-index:5; 
 
    margin:10px auto; 
 
    width:200px; 
 
    height:auto; 
 
    border:1px solid; 
 
    border-radius:5px; 
 
} 
 
#absolute{ 
 
    position: absolute; 
 
    z-index:1; 
 
    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>