如何将两个div叠放在一起？

Question

所以，我想将三个不同的div放在一起。顶部div将是一个带有透明背景的文本（例如白色），中间div将是仅具有背景颜色（例如蓝色）的空div，与第一个div的文本颜色不同，底部div将是另一个空div，其背景颜色与顶部div的文本颜色相同（因此在这种情况下为白色）。

我想这样做的原因是创建一个按钮，它基本上看起来是空的（顶部和底部div的颜色相同），但当鼠标悬停在上面时，中间div应向上滑动，并显示不同的颜色，以便我们可以看到第一个div的文本和中间div的背景颜色。

而且，整个内容都将位于Bootstrap容器内（您将在示例中看到）。

HTML：

<div class="row">
 <div class="col-lg-3">
  <div id="topdiv">Button</div>
  <div id="middlediv"></div>
  <div id="bottomdiv"></div>
 </div>
</div>

CSS:层叠样式表

#topdiv{
 background-color:transparent;
 color:white;
 z-index:100;
}

#middlediv{
 background-color:blue;
 z-index:99;
}

#bottomdiv{
 background-color:white;
 z-index:98;
}

jQuery:

$(document).ready(function(){
$('#middlediv').hide();
$('#topdiv').mouseenter(function()
  $('#middlediv').slideDown();
)};
$('#topdiv').mouseleave(function()
  $('#middlediv').slideUp();
)};
});

我已经尝试使用绝对定位，但问题在于我无法将文本对齐到我想要的位置（在这种情况下是在div的中间）。text-align:center不起作用。

主要问题在于CSS，所以我主要需要你的帮助。如果jQuery没有正常工作，我认为我可以处理。

我希望你能理解我的想法，感谢你的帮助！

- Oliver Nagy

Answer 1

你需要为这三个div指定 position: absolute，并为它们的容器指定 position: relative。

- Semyon Tikhonenko

---

我已经尝试过了，但主要问题是将文本对齐到 div 的中心。 - Oliver Nagy

Answer 2

你甚至不需要一个背景div。

.button {
  position: relative;
  width: 200px;
  height: 50px;
  overflow: hidden;
  border: 2px solid black;
  border-radius: 10px;
}
.button div {
  position: absolute;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
}
.topdiv {
  top: 0;
  left: 0;
  color: transparent;
  z-index: 3;
}
.bottomdiv {
  top: 100%;
  left: 0;
  background: blue;
  z-index: 2;
  transition: top 1s;
}
.button:hover .bottomdiv {
  top: 0;
}

<div class="button">
  <div class="topdiv">Button</div>
  <div class="bottomdiv"></div>
</div>

- Ian Hazzard