JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="wrapper">
<div id="container">
<div id="background">
Content
</div>
<div id="original-element" data-special="sticker">
Absolute stays inside
</div>
</div>
</div>
</body>
CSS
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#background {
width: 300px;
height: 300px;
background-color: #CCE;
}
#original-element {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
.sticker {
position:absolute;
}
JavaScript
$("[data-special='sticker']").each(function () {
$('#wrapper').append(
$('<div/>').html($(this).html())
.addClass("sticker")
.css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
.css('left', $('#container').css('left'))
.css('width', $('#container').css('width'))
.css('background-color', $(this).css('background-color'))
);
$(this).css('display', "none");
});