CSS绝对定位元素能否在屏幕缩小时同时降低top值、增大left值？

你可以通过两种常用方案实现屏幕缩小时的元素位置调整需求： #

方案1：媒体查询（自定义多断点，逻辑清晰） #

针对不同屏幕宽度区间单独设置left和top值，适配灵活度最高，示例代码如下：

img {
  position: absolute;
  /* 大屏端默认样式，可替换为你当前的数值 */
  top: -11vw;
  left: -10%; 
  width: 130%;
  min-width: 500px; /* 修正你原代码中非标准的size(500)写法 */
}

/* 屏幕宽度≤768px时的样式，断点可根据设计需求自行调整 */
@media (max-width: 768px) {
  img {
    left: 0; /* 按你的需求增大left值，如需向左移动可调整为更小的负值，比如-15% */
    top: 0; /* 增大top值，实现元素向下偏移 */
  }
}

/* 可新增更小屏幕的断点做二次调整 */
@media (max-width: 480px) {
  img {
    left: 5%;
    top: 3vw;
  }
}

方案2：自适应动态计算（无需多段媒体查询） #

如果希望元素位置随屏幕宽度连续平滑变化，可使用calc结合视窗单位实现：

img {
  position: absolute;
  /* 核心逻辑：屏幕宽度越小，计算得到的top、left值越大，可自行调整系数控制变化幅度 */
  top: calc(-11vw + (100vw - 1200px) * 0.03);
  left: calc(-10% + (100vw - 1200px) * -0.05);
  width: 130%;
  min-width: 500px;
}

注意：标准CSS中left属性定义元素左边缘与定位父元素左边缘的距离，值越小元素越靠左、值越大元素越靠右。如果实际需求是屏幕缩小时元素向左偏移，可根据布局情况调整上述代码中left值的增减方向。

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