我该如何处理，而无需使用3D变换或透视一个多层堆叠方面的问题？

Question

有没有办法实现this不使用3D变换/透视的方法吗？

* {
  margin: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100vh;
}


/* main = body (in real app) */

main {
  transform-style: preserve-3d;
  height: 100vh;
}

section.container {
  display: contents;
  position: relative;
  height: 100vh;
}

section.container section.list {
  transform-style: preserve-3d;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-row-gap: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45vw;
  transform: translate(-50%, -50%);
}

div.item {
  height: 50px;
  background-color: white;
}

div.item.highlighted {
  transform: translateZ(10px);
}

section.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0009;
  transform: translateZ(5px);
}

section.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section.image img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

span.content {
  background-color: white;
  position: fixed;
  top: calc(50% + 20vw);
  left: 50%;
  transform: translate(-50%, -50%);
}

<main>
  <section class="container">
    <section class="image">
      <img src="https://html5up.net/uploads/demos/story/images/banner.jpg">
    </section>
    <section class="list">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item highlighted">Item 3</div>
    </section>
  </section>
  <section class="modal">
    <span class="content">modal content</span>
  </section>
</main>

我相信堆叠方面不允许它的创作规律。该content已为中心并做到这一点的最好的方法之一就是使用position，top/left和transform: translate。但是，当你这样做，创建一个新的堆叠上下文和所有.items都放到里面。由我能将z-index只应用于所有.items在.modal，反之亦然。

3D透视可以解决，但我不知道，如果这是唯一的解决方案，或是否有另一种（DOM结构调整，把.modal别处，...）我试图像一切我能想到的，但没有成功，我仍然相信我失去了一些东西。

Answer 1

你能避免所有的改造和中心的元素不同，他们可以使用z-index。只要避免任何z-index设置为容器，以避免堆叠内容创建。仅使用z-index与模态元素，你想hightlight的元素。

* {
  margin: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100vh;
}


/* main = body (in real app) */

main {
  height: 100vh;
}

section.container {
  height: 100vh;
  display: flex;
}

section.container section.list {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-row-gap: 10px;
  width: 45vw;
  margin:auto;
  position: relative;
}

div.item {
  height: 50px;
  background-color: white;
}

div.item.highlighted {
  z-index:10;
  position:relative;
}

section.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0009;
  z-index:5;
}

section.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section.image img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

span.content {
  background-color: white;
  position: fixed;
  top: calc(50% + 20vw);
  left: 50%;
  transform: translate(-50%, -50%);
}

<main>
  <section class="container">
    <section class="image">
      <img src="https://html5up.net/uploads/demos/story/images/banner.jpg">
    </section>
    <section class="list">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item highlighted">Item 3</div>
    </section>
  </section>
  <section class="modal">
    <span class="content">modal content</span>
  </section>
</main>