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>
    </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.



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?