Question

我有一个div，其中包含一个绝对定位元素（悬停时）向上滑动。该元素包含文本和按钮。此按钮需要定位在底部，但在内容滑动之前不会显示。我试过使用position：absolute，但这会一直显示元素。我也尝试在悬停时应用绝对位置，但由于我使用过渡，因此元素显示得太早。使用转换延迟适用于淡入，但是需要很长时间才能消失。

Fiddle of example.

.div {
  background: #ccffcc;
  margin: 0;
  width: auto;
  height: 350px;
  position: relative;
  overflow: hidden;
}
.div .overlay {
  position: absolute;
  bottom: 0;
  height: 70px;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
  padding: 0 35px;
  width: 100%;
  background: #ffccff;
}
.div:hover .overlay {
  height: 100%;
}
.div .overlay .cta {
  padding: 10px 0;
  background: #eee;
  display: block;
  width: auto;
  position: absolute;
  margin-bottom: 0;
  text-align: center;
  font-size: 16px;
  bottom: 20px;
}

<div class="div">
  <div class="overlay">
    <h2>Titel</h2>
    <p>Text</p>
    <span class="cta">
          <span>Read more</span>
    </span>
  </div>
</div>

Answer 1

问题是，当您将按钮位置设为绝对位置时，它对于相对父级是绝对的。它在.overlay中不是绝对的，因为.overlay已经是绝对位置。您需要做的是将.cta放在屏幕上，就像.overlay一样，然后使用.overlay使用类似的过渡将其向上滑动。我把评论置于我的变化之上

.div {
  background: #ccffcc;
  margin: 0;
  width: auto;
  height: 350px;
  position: relative;
  overflow: hidden;
}
.div .overlay {
  position: absolute;
  bottom: 0;
  height: 70px;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
  padding: 0 35px;
  width: 100%;
  background: #ffccff;
}
.div:hover .overlay {
  height: 100%;
}
.div .overlay .cta {
  padding: 10px 0;
  background: #eee;
  display: block;
  width: auto;
  position: absolute;
  margin-bottom: 0;
  text-align: center;
  /* ===== Add Transition to CTA ===== */
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
  font-size: 16px;
  /* ===== Move bottom off screen ===== */
  bottom: -120px;
}
/* ===== Add :hover for CTA ===== */
.div:hover .cta {
  bottom: 20px;
}

<div class="div">
  <div class="overlay">
    <h2>Titel</h2>
    <p>Text</p>
    <span class="cta">
          <span>Read more</span>
    </span>
  </div>
</div>

Answer 2

不要让它position: absolute，最好是relative＆amp;控制那个位置。只需将.cta更改为

即可

.div .overlay .cta {
  padding: 10px 0;
  background: #eee;
  display: block;
  width: 10%; //changed
  position: relative; //changed
  margin-bottom: 0;
  text-align: center;
  font-size: 16px;
  top: 53%; //changed
}

.div {
  background: #ccffcc;
  margin: 0;
  width: auto;
  height: 350px;
  position: relative;
  overflow: hidden;
}
.div .overlay {
  position: absolute;
  bottom: 0;
  height: 70px;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
  padding: 0 35px;
  width: 100%;
  background: #ffccff;
}
.div:hover .overlay {
  height: 100%;
}
.div .overlay .cta {
  padding: 10px 0;
  background: #eee;
  display: block;
  width: 20%;
  position: relative;
  margin-bottom: 0;
  text-align: center;
  font-size: 16px;
  top: 53%;
}

<div class="div">
  <div class="overlay">
    <h2>Titel</h2>
    <p>Text</p>
    <span class="cta">
          <span>Read more</span>
    </span>
  </div>
</div>

向上滑动的绝对位置

2 个答案: