CSS z-index问题：如何让.box在.cover之上显示，但.case被.cover遮罩？

Question

求助：不改变html结构，只修改css让.box在最上层显示，且case要被cover遮罩层遮住。

<template>
  <div class="container">
    <div class="cover"></div>
    <div class="case">
      <div class="box"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #000;
  .cover {
    position: fixed;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 999;
  }
  .case {
    position: fixed;
    z-index: 100;
    width: 800px;
    height: 400px;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -200px;
    background: #fff;
    display: flex;
    .box {
      width: 300px;
      height: 200px;
      background: #000;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -100px;
      z-index: 99999;
    }
  }
}
</style>

研究了个把小时，累了，毁灭吧

Answer 1

<template>
  <div class="container">
    <div class="cover"></div>
    <div class="case">
      <div class="box"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #000;
  position: relative;
  .cover {
    position: fixed;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 99;
  }
  .case {
    position: fixed;
    z-index: 100;
    width: 800px;
    height: 400px;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -200px;
    background: #fff;
    display: flex;
    .box {
      width: 300px;
      height: 200px;
      background: #000;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -100px;
      z-index: 999;
    }
  }
}
</style>

Answer 2

其实你不需要给其它的DIV加z-index，只需要给.cover加上 z-index: -1; 就足够了。

Answer 3

前提：box的父亲元素case的z-inex决定了box能不能比外部其他元素层次高。box自身的z-index再高也会被case限制，你应该对比case和cover之间的z-index值。
你的需求是写一个dialog弹框吗？也许你应该试试dialog这个元素来解决这个问题。

<div class="container">
   <div class="cover"></div>
     <div class="case">
       <dialog class="box"></dialog>
     </div>
</div>

只需要将box元素从div修改为dialog元素即可。
打开弹窗可以使用：

  let dialog = document.getElementsByClassName('box')[0];
  dialog.showModal()

另外修正box的样式

  .box {
    width: 300px;
    height: 200px;
    background: #000;
  }

由于是浏览器内置的，dialog总是比其他任何元素层级高。虽然动了一行html结构，但这能解决你的问题。
附上效果和文档：

<dialog>：对话框元素

Answer 4

.container {
  height: 100vh;
  background: #000;
  .cover {
    position: fixed;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 999;
  }
  .case {
    position: fixed;
    z-index: 100;
    width: 800px;
    height: 400px;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -200px;
    background: #fff;
    display: flex;
    .box {
      width: 300px;
      height: 200px;
      background: #000;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -100px;
      z-index: 1000; 
      isolation: isolate; 
    }
  }
}