如何使.output-container背景盒子延伸至屏幕边缘？

当前使用的CSS代码：

.output-container {
    background: #333;
    color: #fff;
    padding: 1rem 1;
    width: 100%;
    top: 0;
    z-index: 1000;
    text-align: center;
}

已经把这个类加到对应元素上，想要文本后方的灰色背景延伸到屏幕边缘，但文本和盒子绑定在一起，直接调大width的话，文本会跟着右移，显示异常。之前试了增大width，结果背景和文本一起往右延伸，文本显示错位，而且背景左边位置没变化。

给你几个实用方法，挑适合你场景的用：

方法1：负margin + 内边距补偿 #

给容器加负左右margin，同时用padding把文本拉回正常位置，这样背景会超出父容器铺满屏幕：

.output-container {
    background: #333;
    color: #fff;
    padding: 1rem 2rem; /* 调整左右padding，避免文本贴屏幕边缘 */
    width: 100%;
    margin: 0 calc(-50vw + 50%); /* 核心代码，拉满屏幕宽度 */
    top: 0;
    z-index: 1000;
    text-align: center;
}

方法2：绝对定位 #

如果父容器是相对定位的，直接把这个容器设为绝对定位，左右设为0就能铺满屏幕：

.output-container {
    background: #333;
    color: #fff;
    padding: 1rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    text-align: center;
}
/* 注意：父元素必须加 position: relative; 不然会相对于整个页面定位 */

方法3：伪元素分离背景与文本 #

把文本和背景分开，用伪元素单独做全屏背景，文本保持原来的布局：

.output-container {
    position: relative;
    color: #fff;
    padding: 1rem;
    z-index: 1; /* 保证文本在背景上方 */
    text-align: center;
    width: 100%;
    top: 0;
}
.output-container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #333;
    z-index: -1; /* 背景放在文本下面 */
    margin: 0 calc(-50vw + 50%); /* 让背景铺满屏幕 */
}

内容的提问来源于stack exchange，提问作者Daily stuff And things