对齐div的底部没有定义的高度

Question

尝试将＃top-btn的底部对齐到页脚的顶部但我不想定义＃top-btn的高度

HTML

<footer class="row">
    <a id="top-btn" href="">...</a>
</footer

CSS

#top-btn {
position: absolute;
display: block;
z-index: 1000;
right: 50px; 

bottom: ?;

text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 1.25em;
letter-spacing: 1px;
color: #fff;
padding: 16px 35px;
background-color: #d11e5d;
}

Answer 1

您可以使用relative / absolute：

footer {
  margin:2em;
  background:gray;
  position:relative;/* absolute child will use it as reference*/
  }
a {
  position:absolute;
  right:50px;
  bottom:100%;/* from its referent container, goes right on top of it, no matter parent's height's */
  background:yellow;
  }

<footer class="row">
    <a id="top-btn" href="">...</a>
  <p>some text here?</p>
</footer>
<footer class="row">
  <p>some text here?</p>
    <a id="top-btn" href="">...</a>
  <p>some text here?</p>
  <p>some text here?</p>
</footer>
  <footer class="row">
  <p>some text here?</p>
    <a id="top-btn" href="">...</a>
  <p>some text here?</p>
</footer