html - 如何正确定位 div 以实现下方有文本的叠加悬停效果

Question

我有两行 4 盒装的 div。目标是在每个框中都有一个标题，然后将鼠标悬停在该框上将显示更详细的 p 文本和褪色的背景。我已经很接近了，我只是不知道如何将跨度覆盖层实际分层到 div 顶部，而不是将其填充起来。任何帮助将不胜感激!

.box {
  width: 200px;
  float: left;
  box-shadow: inset 1px 1px 40px 0 rgba(90, 90, 90, .25);
  margin: 5% auto 0 auto;
  background-color: #DE5D40;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}
.overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  z-index: 10;
}
.box:hover .overlay {
  opacity: 1;
}
.overlayText {
  font-family: Helvetica;
  font-weight: 14;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
}
.one-fourth.box {
  margin-bottom: 20px;
  height: 130px;
}
/* Column Classes
    Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
  width: 48.717948717948715%;
}
.one-third,
.two-sixths {
  width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
  width: 65.81196581196582%;
}
.one-fourth {
  width: 23.076923076923077%;
}
.three-fourths {
  width: 74.35897435897436%;
}
.one-sixth {
  width: 14.52991452991453%;
}
.five-sixths {
  width: 82.90598290598291%;
}
.first {
  clear: both;
  margin-left: 0;
}

<div class="one-fourth first box box1">
  <h3>SEO</h3>
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box2">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box3">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box4">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

<div class="one-fourth first box box5">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box6">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box7">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box8">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

Answer 1

检查下面的代码应该是您想要的。

---

这里的关键是定位。

您想要的是一个覆盖其容器且在死点具有文本的框。

在这些情况下，position:absolute 和 position:relative 意味着一切。

在这种情况下，对相对论的一点了解会有所帮助，但直到你打开相对论的副本，你才能拥有它。

您的容器将相对定位。这意味着它是相对于其周围的内容定位的。但它还有第二个级联功能。

它告诉绝对定位的元素相对于其容器的行为是绝对的。

因此，当发生这种情况时，我们可以使用顶部、底部、左和右来控制它在容器中的绝对位置。

所以我们想要发生的是让你的文本位于正中心，所以在这种情况下我们告诉它有 top,left,bottom & right 0px & margin:auto;

这将告诉您的元素，它不会从容器的任何一点获取定位规则，并且它希望自动考虑其边缘化，但由于您已经定义了可以定位它的所有轴，因此它会产生边缘它到中心。

希望它能帮助您理解为什么会发生这种情况。

---

.box {
  position: relative;
  width: 200px;
  float: left;
  box-shadow: inset 1px 1px 40px 0 rgba(90, 90, 90, .25);
  margin: 5% auto 0 auto;
  background-color: #DE5D40;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}
.overlay {
  top: 0px;
  left: 0px;
  position: absolute;
  background: rgba(0, 0, 0, .75);
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  z-index: 10;
  width:100%;
  height:inherit;
}
.box:hover .overlay {
  opacity: 1;
}
.overlayText {
  position: absolute;
  margin: auto;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  font-family: Helvetica;
  font-weight: 14;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  height:15px;
}
.one-fourth.box {
  margin-bottom: 20px;
  height: 130px;
}
/* Column Classes
    Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
  width: 48.717948717948715%;
}
.one-third,
.two-sixths {
  width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
  width: 65.81196581196582%;
}
.one-fourth {
  width: 23.076923076923077%;
}
.three-fourths {
  width: 74.35897435897436%;
}
.one-sixth {
  width: 14.52991452991453%;
}
.five-sixths {
  width: 82.90598290598291%;
}
.first {
  clear: both;
  margin-left: 0;
}

<div class="one-fourth first box box1">
  <h3>SEO</h3>
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box2">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box3">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box4">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

<div class="one-fourth first box box5">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box6">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box7">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box8">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>