html - CSS:将元素绝对定位到绝对父级

Question

我的页面一侧有一个固定的导航栏。我想在导航栏的底部有一个菜单，并在其内部有一个右侧 anchor 标签形式的按钮。所以我对菜单使用了绝对定位 bottom: 0。效果非常好。但是当我想将按钮绝对定位时，菜单的高度设置为 0，并且按钮似乎位于整个导航栏下方。

HTML 和 CSS:

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 200px;
  border:solid;
}

.menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid;
}

.btn {
  position: absolute;
  right: 0;
  border: solid;
}

<div class="fixed">
  <div class="menu">
    <a class="btn">
        Hello
    </a>
  </div>
</div>

float: right也不起作用，使用这种方法按钮仍然位于左侧。如何将按钮放置在菜单右侧？

Answer 1

为什么不直接使用text-align:right？

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 200px;
  border:solid;
}

.menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid;
  text-align:right;
}

<div class="fixed">
  <div class="menu">
    <a class="btn">
        Hello
    </a>
  </div>
</div>