我在使用perspective和transform css声明时尝试让视差滚动工作时遇到问题。转换工作正常，但背景中的元素显示在页面上其余元素的上方。就好像背景元素比前景元素具有更高的z-index，甚至认为我根本不使用z-index！我的印象是，一旦三维变换发挥作用，堆叠上下文就失去了大部分意义。
这是问题的最小例子：
html {
overflow: hidden;
}
body {
overflow: auto;
perspective: 3000px;
height: 500px;
}
.background {
background-color: lightblue;
transform: translateZ(-5000px)
}
.foreground {
position: absolute;
}<body class="perspective-container">
<div class="foreground">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus. Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus.Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus. Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus.Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.</div>
<div class="background">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus.Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus.Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.</div>
</body>
我尝试添加transform-style: preserve-3d，但这没有帮助：
* {
transform-style: preserve-3d;
}
如何让背景出现在后台？为什么没有transform-style: preserve-3d解决这个问题？
答案 0 :(得分：0)
使用具有transform-style: preserve-3d：
html {
overflow: hidden;
}
.wrapper {
transform-style: preserve-3d;
}
body {
overflow: auto;
perspective: 3000px;
height: 500px;
}
.background {
background-color: lightblue;
transform: translateZ(-5000px)
}
.foreground {
position: absolute;
}<body class="perspective-container">
<div class="wrapper">
<div class="foreground">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus. Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus.Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus. Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus.Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.</div>
<div class="background">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus.Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et congue nulla, id sodales quam. Nulla semper non sapien ac faucibus. Cras eu diam eu felis rutrum fermentum id eu nunc. Aenean ipsum odio, pulvinar non pulvinar eu, gravida vitae leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ex nisl, cursus non risus commodo, maximus ornare velit. Ut ac laoreet dolor, vitae bibendum risus.Nam venenatis eleifend enim eget aliquet. Maecenas consequat augue eu metus imperdiet venenatis. Ut venenatis ante bibendum arcu auctor interdum. Donec finibus metus sed luctus suscipit. Praesent porttitor feugiat quam blandit aliquam. Ut rhoncus dolor id diam bibendum molestie. Cras dolor sem, bibendum eget eleifend id, ornare non turpis. Nunc finibus cursus nisi, nec pulvinar tortor imperdiet in. Phasellus mi dui, malesuada sit amet velit at, rutrum ullamcorper massa. Nam viverra risus ornare rutrum rhoncus. Proin imperdiet pulvinar ex, ut lobortis ipsum rhoncus at.</div>
</div>
</body>
对于这个简单的例子，你也可以只重新排序页面上的元素，使所有背景都在所有前景之前。
transform-style: preserve-3d解决此问题？确实如此，但透视容器 direct 子元素的任何元素都会在通常的堆叠上下文规则中重叠。 我不确定为什么。