有这样一个功能性任务的基本例子。两个块，子级相对于父级具有绝对定位并且大于其大小。它超出了边缘。
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.block {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #000;
}
.absolute {
position: absolute;
left: -20px;
top: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
z-index: -1;
background-color: pink;
}<div class="block">
<div class="absolute"></div>
</div>问题 - 如何确保孩子永远不会离开屏幕的可见区域？
如何编写一个处理程序（也许有人知道 CSS 中的解决方案），以保证在调整浏览器窗口大小时，子窗口（粉色块）不会超出范围。也就是说，一旦范围接近带有“position:absolute;”的块它的父级开始移动，并且仅当视口变得小于宽度时： calc(100% + 40px);显示屏会坏。
为了清楚起见，另一个例子
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.block {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #000;
}
.absolute {
position: absolute;
left: -20px;
top: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
z-index: -1;
background-color: pink;
}<div class="block">
<img class="absolute" src="https://placehold.co/340x340?text=Hello+World" alt="image">
</div>调整范围大小时，浏览器由父元素引导并缩放元素，.block但我感兴趣的是如何绑定到子元素position:absolute;
