如何设置position:absolute的Div宽度为100%？技术求助

我明白你想要实现的效果：让绝对定位的.box2占满整个屏幕宽度，而不是被居中的父容器.box1限制住。咱们先看看你现有代码的问题，再给出可行的解决方案。

问题根源 #

你给.box1设置了position:relative，这会让它成为.box2（绝对定位元素）的包含块。所以.box2的width:100%是相对于.box1的500px宽度计算的，自然无法超出父容器范围。

解决方案 #

这里有两种简单的方法可以实现你想要的全屏宽度效果：

方案一：使用视口单位 + transform 居中 #

直接让.box2的宽度等于整个视口宽度，再通过transform让它和父容器保持垂直对齐：

.box1 {
  position:relative;
  width:500px;
  height:100px;
  margin:0 auto;
  overflow:visible;
  background:#f1f1f1;
}
.box2 {
  position:absolute;
  top:10px;
  width:100vw; /* 宽度占满整个视口 */
  left:50%; /* 相对于父容器左侧偏移50% */
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现完美居中 */
  height:50px;
  background:red;
}

方案二：使用 calc() 扩展左右边界 #

这种方式不需要设置宽度，通过计算左右偏移量，让.box2自动延伸到屏幕边缘：

.box1 {
  position:relative;
  width:500px;
  height:100px;
  margin:0 auto;
  overflow:visible;
  background:#f1f1f1;
}
.box2 {
  position:absolute;
  top:10px;
  /* 计算逻辑：视口一半宽度 - 父容器一半宽度，让元素左右边缘对齐屏幕 */
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  height:50px;
  background:red;
}

这两种方法都能实现你想要的动图效果，你可以根据自己的需求选择其中一种~

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