JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="centerbox">
<div id="floater"></div>
</div>
Resize the window <b>CAREFULLY</b> and notice that sometimes the red box is precisely within the back square, and sometimes it's 1px off.
</div>
CSS
#container
{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAADICAMAAACHxIozAAAABlBMVEUAAAD///+l2Z/dAAACq0lEQVR42u3VQQ0AMAzEsHX8OXcoWuk0G0I+uQUAxLsHAIhn6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChAwCGDgCGDgAYOgBg6PCtXqAyGDowrcZpDIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6AGDokKfHaQyGDkyrBSqDoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChSwAAhg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDALEeYdfPYfw5pLEAAAAASUVORK5CYII=');
background-position: center top;
background-repeat: no-repeat;
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
}
#centerbox
{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative
}
#floater
{
position: absolute;
top: 50px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}