CSS位置绝对在元素后面不能使用

Question

我有这样的问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何解决方案，我不知道使用良好的英语语言 注意：按钮保持这样，也不要绝对改变位置。 - 我的英语很糟糕:(

Answer 1

将 #absolute div的position:relative;和更高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

像这样替换按钮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 lisik，你是一个很棒的人。非凡

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;