为何绝对定位元素会放大页面？如何实现半隐藏屏幕外元素？

问题根源 #

你当前的代码存在两个核心问题：

1. left: 100%会让元素完全偏移到父容器右侧外部，导致看不到元素；同时页面默认不会裁剪溢出内容，溢出的元素会触发水平滚动条，看起来像是页面尺寸被放大。
2. 父容器未设置溢出裁剪规则，无法限制元素溢出后的显示范围。

修正方案 #

方案一：基于父容器相对定位

调整元素位置，让一半留在容器内，同时给父容器添加溢出裁剪：

<div class="app-wrapper" style="position: relative; overflow: hidden;">
    <div class="half-hidden-element" style="
        position: absolute;
        width: 41.875vw;
        height: 41.875vw;
        left: calc(100% - 20.9375vw);
        top: 0;
        background-color: black">
    </div>
</div>

• left: calc(100% - 20.9375vw)：通过计算让元素一半宽度留在父容器内（20.9375vw是41.875vw的一半）
• overflow: hidden：让父容器裁剪溢出的元素，避免触发页面滚动条

方案二：直接相对于视口定位（更简洁）

如果不需要依赖父容器，用position: fixed直接绑定视口，代码更简单：

<div class="half-hidden-element" style="
    position: fixed;
    width: 41.875vw;
    height: 41.875vw;
    right: -20.9375vw;
    top: 0;
    background-color: black">
</div>

• right: -20.9375vw：将元素一半宽度移出视口右侧，另一半留在屏幕右上角
• fixed定位无需父容器设置relative，直接基于屏幕视口定位

内容的提问来源于stack exchange，提问作者Efim Rozovsky