JSFiddle - React, Tailwind, and code Playground

HTML

<div class="reference"><div class="fixed">T 5.1</div><div class="fixed">T  5.2</div><div class="fixed">T 5.3</div><div class="fixed">T 5.4</div>Some other content in 5 (which has four fixes in it!).</div>

CSS

body {
    height: 1500px; /* get scroll for demo */
}
.reference {
    width: 200px;
    height:200px;
    border: 1px solid black;
    position: absolute;
    top: 100px;
    right: 100px;
    margin: 50px;
}

.fixed {
    position: fixed;
    width: 40px;
    height: 25px;
    border: 1px solid red; /* to see it */
}
.fixed:nth-of-type(1) {
    margin-top: 200px; /*push/pull it up/down */
    margin-left: 200px; /* push/pull it right/left */
}
.fixed:nth-of-type(2){
    margin-top: -27px; 
    margin-left: 200px; 
}
.fixed:nth-of-type(3) {
    margin-top: -27px; 
    margin-left: -42px; 
}
.fixed:nth-of-type(4){
    margin-top: 200px; 
    margin-left: -42px; 
}