JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<div class="rel">I'm a big meany</div>
<div class="ani">I'm sneaky!</div>
<div class="abs">I do what I'm told!</div>

CSS

.rel {
    background: brown;
    position: relative;
    width: 100px;
    height: 100px;
    top: 100%;
    display: inline-block;
}

.ani {
    background: brown;
    position: relative;
    width: 100px;
    height: 100px;
    top: 100%;
    display: inline-block;
}

.abs {
    background: mediumSeaGreen;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100%;
    right: 0;
    margin-top: -100px; /* just so you don't have to scroll */
}

JavaScript

$('.rel').on('click', function() {
    $(this).css({top: 100});
});

$('.ani').on('click', function() {
    $(this).animate({top: 0});
});

// Interesting effect on .animate(), watch how it slides as if it was positioned 100% top

// Pixel/em sizes will work but not a percent size

// A percent size will work for left but not for top?