The wrapping div should have position: relative
:
export default function Home() {
return (
<div>
<div style={{width: '100px', height: '100px', position: 'relative'}}>
<Image src={"/i.png"} layout="fill"/>
</div>
</div>
)
}
This is a consequence of how position: absolute
works. It’s containing block will be the nearest ancestor element that has any position value but static
(the initial value).