JSFiddle - React, Tailwind, and code Playground

by Cal Francesco

HTML

<div class="wrapper">
    <p>Some text and descriptions</p>
    <div class="widget">
        <div class="box-wrap">
            <div class="box"></div>
        </div>
    </div>
    <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>

CSS

.wrapper {
    width:300px;
    display:block;
    position:relative;
    overflow:hidden;
    background-color:gray;
}
.widget {
    width:300px;
    height:300px;
    display:block;
    //position: relative;
    background-color:green;
}
.box-wrap{
    display:block;
    position: fixed;
}
.box {
    width:100px;
    height:100px;
    position:absolute;
    left:250px;
    top:50px;
    background-color:red;
    visibility:visible;
}