How to position bottom of div above top of its container

Tags: css,css-position

Problem :

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>
    <div class="learn__content" id="learn-01">
        <a class="learn__close learn__x" href="#!">[close]</a>
          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.

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.

Solution :

transform: translateY(-100%) 

And make sure you use WebKit, and moz if needed

    CSS Howto..

    How can I get these Bootstrap column divs to be uniform length inside of a well?

    How to centre my CSS menu?

    slideshow banner without using flash

    How does positioning work in HTML/CSS?

    How to do aspect to fill in img tag?

    How to set an Ionic list item height with a background image

    How to embed fonts in CSS?

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    How to apply table css to this structure?

    How to close popup

    How would I do a two finger drag with javascript/jquery?

    2 Sidebar Columns Layout (How)?

    jQuery how to select children first level div's

    How to change table width using css

    How to test CSS selector performance?

    Avoid the height change of a container + how to position a list item at end

    How to disable correctly CSS3 transition property when needed

    facebook and css, how to place a like comment dialog on top of a video?

    How to make an overflow hidden only for box-shadow

    how to override theme in primefaces on Dialog window and set user define CSS

    How can I make a pointy arrow with a div in CSS

    How to segment a circle with different colors using CSS

    How do I place a small paragraph to the right in between a text article

    How to give menu sub menu options

    how to align image and text when floating to image

    How do i rotate text in css

    How to chose which CSS rule to use from multiple style sheets

    How to jump to specific sections of a sprite sheet in css?

    How to solve CSS background transparency?

    How do I remove the side padding in the following case?