JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
    <div class="fixed">
    </div>
</div>
<div class="container">
    <div class="square">
    </div>
</div>

CSS

.left {
    position: absolute;
    top: 100px;
    left: 10px;
    width: 100px;
    height: 300px;
    background: red;
    z-index: 2;
    overflow-y: hidden;
}

.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 90px;
    z-index: 2;
    background: blue;
}

.container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 500px;
    background: grey;
    overflow-y: hidden;
     z-index: 1;
}

.square {
    -webkit-transform: translate3d(10px, 10px, 0);
    margin-left: 120px;
    margin-top: 120px;
    width: 40px;
    height: 53px;
    z-index: 481;
    background: green;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    position: absolute;
}