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 to keep table headers fixed while scrolling down a table

    How to select nth line of text (CSS/JS)

    How can I get the body to continue look the same when a div inside overflows to the right?

    How do i move an image from left to right and right to left in javascript for infinite time?

    How to make a colorful gradient glow around your input-box?

    Rails - how to place text onto an image within a code loop

    How to do grid of div elements?

    JQuery toggled div not showing on resize

    How to stop DIV from sticking to left of page when zoom in CSS HTML

    Check this web optimization report - how can I fix it?

    How to set ul width in percent?

    CSS - How to line up buttons?

    How to align 'n' divs horizontally WITH margin/padding?

    How to reposition a div

    how to give style to the selected option in html

    Some doubts about how make an image clickable using CSS

    How to make fonts display on web cross-platform?

    How to serve different css files to different ajax pages?

    How to download CSS file through JQuery

    How to stretch a background-image with css

    how to base a css rule on inherited value of dir attribute

    How to fix html border corner slope with css?

    How to vertically align text to the middle of a list

    How to make a “wrappanel” in html?

    How to line up lists side by side?

    How to generate regular CSS file from SASS?

    How to get an image to resize on scroll?

    how does CSS float property combine when dealing with nested divs?

    How to concatenate icons into a single image with ImageMagick?

    How do I center content and extend the background color to 100% of the page?