How to position bottom of div above top of its container

Question

I'm working on a HTML/CSS module that functions like a modal but looks like a tooltip

<aside class="learn is-learn-top">
    <a class="learn__trigger" href="#learn-01">
        <span class="learn__icon">[icon]</span>
        <span class="learn__summary">Click here to learn more about TV pilots from Samual Jackson...who else</span>
    </a>
    <div class="learn__content" id="learn-01">
        <a class="learn__close learn__x" href="#!">[close]</a>
        <div>
          Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
        </div>
    </div>
</aside>

I'm using

.learn__content:not(:target) {
    display: none;
}

to keep that hidden unless the trigger is clicked. I'm trying to position .learn__content (which may be of varying height) above .learn like tooltip. How can I position it like this without using an explicit height? Here's what a have so far.

.learn {
    position: relative;
}

.learn__content {
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: gold;
}

.is-learn-top .learn__content {
    transform: translateY(-100%);
    top: -100%;
}

but -100% doesn't seem to give the necessary offset.

Answer 1

Basically using bottom: 100%; (on an absolute positioned element),
but let's see another example using

label and checkbox

aside{ padding-top:100px; /*JUST FOR DEMO*/ }
.modal{
  display:    inline-block;
  position:   relative;
  font-weight: bold;
}
.modal>div{
  pointer-events: none;
  font-weight:normal;
  position:   absolute;
  bottom:     100%;
  left:       50%;
  width:      150px;
  padding:    15px;
  background: #eee;
  transition: 0.3s;
  opacity:    0;
  visibility: hidden;
  transform:  translateY(30px) translateX(-50%);
}
.modal>input{
  position:   absolute;
  visibility: hidden;
  height:     0;
}
.modal>input:checked+div{
  visibility: visible;
  opacity:    1;
  transform:  translateY(0px) translateX(-50%);
}
.modal>div:after{
  content: "×";
  pointer-events:auto;
  position:   absolute;
  top:        5px;
  right:      10px;
  cursor:     pointer;
  transition: 0.3s;
}

<aside>  

  This is some text

  <label class="modal">
    click to find out
    <input type="checkbox">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex inventore aperiam!
    </div>
  </label>

  and more text here

  <label class="modal">
    click me!
    <input type="checkbox">
    <div>
      Like it?! Share and rate!
    </div>
  </label>

  and happy coding

</aside>

As you can see above, I'm really worried about where the tooltip will appear. Better use a JS script or a jQuery plugin - that way you don't need to worry if the text will be readable or hidden somewhere below the window edges.

Answer 2

transform: translateY(-100%) 

And make sure you use WebKit, and moz if needed