CSS: position element absolutely to absolute parent

Question

I have a fixed navigation bar on the side of my page. I want to have a menu at the bottom of the nav-bar and inside that a button in form of an anchor-tag on the right side. So I used absolute positioning for the menu with bottom: 0. That works perfectly fine. But when I want to position the button absolute, the height of the menu is set to 0 and the button seems to be below the whole navbar.

HTML and 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: rightdidn't work either, with that approach the button is just still on the left side. How can I position the button on the right side of the menu?

Answer 1

Why not just use 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>