JSFiddle - React, Tailwind, and code Playground

by Mark Thompson

HTML

<div id="wrapper">
    <h1>My Page</h1>
    <div id="red"></div>
    <div id="blue"></div>
</div>

CSS

#wrapper {
    width:300px;
    height:1000px;
    border:1px solid #000000;
    margin: 10px auto 10px auto;
}

h1 {
    text-align:center;
    background:#eeeeee;
}

#red {
    width:50px;
    height:50px;
    background:#ff0000;
    
    position: absolute; /* try changing to "relative" */
    
    top: 50px;
    left: 10px;
}

#blue {
    width:50px;
    height:50px;
    background:#0000ff;
    
    /* Scroll the panel below to see the effect of fixed. */
    /* Try changing to "relative" or "absolute" */
    position: fixed;  
    
    top: 50px;
    left: 10px;
    z-index:-1;
}