Can I position an element absolutely based on it’s own bottom edge?

I need to position an element so that it’s just off the top of the screen (this will be a menu that slides down). I can, of course, use position: absolute and top: 0px but that will position by element based on my elements top edge.

Can I do the same but using my elements bottom edge?

Example:

#foo {
  position: absolute;
  top: 0px;
}

Will give me this:

-------------------------------------------
|              |                          |
|   id="foo"   |        <body>            |
----------------                          |
|                                         |
|                                         |
-------------------------------------------

But is there a way to get this with CSS:

----------------
|              |
|   id="foo"   |
-------------------------------------------
|                                         |
|                       <body>            |
|                                         |
|                                         |
|                                         |
-------------------------------------------

What I’m trying to accomplish is to position a div with an unknown height (as the content will be variable) to the very top of the document using said div’s bottom edge rather than the top.

Or is this not something CSS can handle by itself?


solution

It seems like you want to position the element 100% from the bottom:

Example Here

#foo {
  position: absolute;
  bottom: 100%;
}
.parent {
  width: 400px;
  height: 200px;
  margin: 75px;
  position: relative;
  border: 1px solid;
}
.child {
  width: 200px;
  height: 50px;
  background: red;
  position: absolute;
  bottom: 100%;
}
<div class="parent">
  <div class="child"></div>
</div>