我正在尝试使用CSS创建一个粘性背景，
像这样(粉红色的背景将完全填充，但为了方便，我保留了最小的可见高度)
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
}
#rest {
min-height: 100%;
width: 100%;
background: blue;
}
#content {
width: 50%;
background: yellow;
height: 100%;
margin: auto;
position: relative;
z-index: 1;
}
#sticky_back
{
position:sticky;
top:0;
height:50px;
width:100%;
background-color: pink;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
</div>
</div>
</body>
</html>但是我似乎无法重叠两个粉色和黄色的divs
如果我试图改变position:absolute和relative，那么content中的文本就会像这样溢出
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
}
#rest {
min-height: 100%;
width: 100%;
background: blue;
position: relative;
}
#content {
min-height:100%;
width: 50%;
background: yellow;
position: absolute;
left: 50%;
transform: translate(-50%,0%);
top:0;
z-index: 1;
}
#sticky_back
{
position:sticky;
top:0;
height:50px;
width:100%;
background-color: pink;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
<span>
psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor st dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu f
</div>
</body>
</html>是否有任何方法可以创建所需的背景，同时避免溢出?
编辑
如果你正在寻找一个完整的背景填充解决方案，然后检查这个链接:
如何适合一个粘性的背景图像，防止css溢出?
由于#sticky_back的height是未知的，您可以使用grid布局。
将display: grid添加到父节点(#rest)，并将grid-area: 1 / 1 / 2 / 2添加到两个子节点(#content和#stick_back)。
您还需要将z-index: 0添加到#content以将元素带到前面。
#rest {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
.
.
.
#content {
z-index: 0;
grid-area: 1 / 1 / 2 / 2;
margin: 0 auto;
.
.
.
#sticky_back {
grid-area: 1 / 1 / 2 / 2;
.
.
.
html,
body {
margin: 0;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
width: 100%;
background: black;
}
#rest {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
background: blue;
}
#content {
width: 50%;
z-index: 0;
grid-area: 1 / 1 / 2 / 2;
margin: 0 auto;
background: yellow;
}
#sticky_back {
width: 100%;
height: 50px;
grid-area: 1 / 1 / 2 / 2;
position: sticky;
top: 0;
background-color: pink;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
<span>
psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor st dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu f
</span>
</div>
</div>
</body>
</html>