CSSの位置要素の背後にある絶対的な使用は使用できません

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;を追加して、そのようなボタン自体に#absoluteのdivのそれよりも高いz-index：

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

この

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 lisikのようなボタンのCSSを置き換える、あなたは素晴らしい人です。また、臨時

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