Как я могу справиться с проблемой многослойного стекового контекста без использования трехмерных преобразований или перспективы?

Question

Есть ли способ реализовать это без использования 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 только ко всем .item с .modal и наоборот.

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>