JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/6867244/force-position-absolute-to-be-relative-to-document-not-parent-container/6867331

by tw16

HTML

<p class="force-scroll">Scroll down to see difference</p>

<div class="absolute box">
    <p>
        I am <code>position:absolute</code><br><br>
        i.e. positioned relative to the document (in this case)
    </p>
</div>

<div class="fixed box">
    <p>
        I am <code>position:fixed</code><br><br>
        i.e. positioned relative to the viewport
    </p>
</div>

CSS

/* Positioning */
.absolute {
    position: absolute;
    top: 60px;
    right: 30px;
}

.fixed {
    position: fixed;
    top: 60px;
    left: 30px;
}

/* Styling */
body { background: #fff; font: 13px/1.4 sans-serif; text-align: center;}
.force-scroll { height: 2000px; font-weight: bold; }
.box { height: 40%; min-height: 100px; width: 40%; border: 2px solid #333;}
code { background: #f9f2f4; border: 1px solid #ded6d8; padding: 2px 4px; border-radius: 3px; color: #c7254e; }