html - 为什么overlay div无法采用父级的尺寸

我正在尝试创建一个按钮。
当鼠标悬停包装div（ks-wrapper）时，将显示另一个div（ks-overlay）（开始时是隐藏的），并且基础的div（ks-button）也将隐藏。
按钮没有固定尺寸也是必要的。

有什么建议么？

的HTML

<div class="ks-wrapper">
  <div class="ks-button">
    <div class="ks-header">
      Header
    </div>
    <div class="ks-content">
Text
    </div>
  </div>
  <div class="ks-overlay">
    "K"
  </div>
</div>

的CSS

.ks-wrapper {
  position: relative;
  float: left;
  height: 85px;
  width: 100%;
}
.ks-button {
  position: absolute;
  color: white;
  width: 100%;
  height: 100%;
}
.ks-header{
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  background-color:yellow;
  max-height:20px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:black;
  padding:5px;
}

.ks-content{
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  background-color:grey;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:black;
  padding:5px;
  height:100%;
}

.ks-wrapper .ks-overlay {
  transition: visibility 0s, opacity 0.5s ease-in-out;
  position: absolute;
  color: yellow;
  background-color: green;
  width: 97.5%;
  height: 85px;
  visibility: hidden;
  opacity: 0;
  border-radius:10px;
  padding:10px;
  overflow:hidden;
}

.ks-wrapper:hover .ks-overlay {
  visibility: visible;
  opacity: 1;
}

更新
首先，我要感谢大家对我的问题的快速答复。
其次，我想让自己更加清晰...并添加一些我可以解决的问题...

1）此按钮将在响应模板中使用。
按钮是否可能没有固定的高度，而覆盖层是否遵循该高度？

2）如何完成过渡和鼠标离开（过渡仅在悬停时有效）？

3）此按钮位于以下元素的顶部

这是代表问题的link in the fiddle。

非常感谢您的宝贵时间

最佳答案

标头在顶部占20像素。您需要将这些像素添加到.ks-wrapper .ks-overlay {

.ks-wrapper {
  position: relative;
  float: left;
  height: 85px;
  width: 100%;
}
.ks-button {
  position: absolute;
  color: white;
  width: 100%;
  height: 100%;
}
.ks-header{
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  background-color:yellow;
  max-height:20px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:black;
  padding:5px;
}

.ks-content{
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  background-color:grey;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:black;
  padding:5px;
  height:100%;
}

.ks-wrapper .ks-overlay {
  transition: visibility 0s, opacity 0.5s ease-in-out;
  position: absolute;
  color: yellow;
  background-color: green;
  width: 97.5%;
  height: 105px;
  visibility: hidden;
  opacity: 0;
  border-radius:10px;
  padding:10px;
  overflow:hidden;
}

.ks-wrapper:hover .ks-overlay {
  visibility: visible;
  opacity: 1;
}

<div class="ks-wrapper">
  <div class="ks-button">
    <div class="ks-header">
      Header
    </div>
    <div class="ks-content">
Text
    </div>
  </div>
  <div class="ks-overlay">
    "K"
  </div>
</div>

关于html - 为什么overlay div无法采用父级的尺寸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42874054/