html - 如何在不使用 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。但是，当您这样做时，将创建一个新的堆栈上下文，并将所有 .item 放入其中。通过这种方式，我可以将 z-index 仅应用于 .modal 上的所有 .item，反之亦然。

3D 透视 可以解决这个问题，但我想知道这是否是唯一的解决方案，或者是否还有其他解决方案(DOM 重组并将 .modal 放在其他地方，.. .) 我尝试了我能想到的一切，但没有成功，我仍然相信我错过了一些东西。

Answer 1

你可以避免所有的变换，并以不同的方式居中你的元素，你可以使用 z-index。只需避免将任何 z-index 设置为容器即可避免创建堆栈上下文。仅将 z-index 与模态元素和您要突出显示的元素一起使用。

* {
  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>