javascript - 将 DOM 置于叠加层之上

Question

我正在尝试覆盖整个屏幕，并在其上方弹出一个 DOM，这是一种网页游戏教程，告诉用户他应该按哪个按钮。

如上图所示，我试图隐藏叠加层下的所有内容，只弹出其上方的红色图标

到目前为止我尝试了什么

我直接在 body 标签下添加了一个 div(这将是叠加层)，它的 z-index 大于页面中的其他元素，并且只有聚焦的 DOM 的 z-index 大于叠加

问题

这没有用，因为我有一个 opts-container 元素的 translate，并且删除这个样式对我来说不是一个选项，因为我一直在使用它元素。

代码(用于说明)

$("#veil").hide();
$('.icons-group-s div').on('mouseenter',function(){
		console.log("hovered");
    $("#veil").show();
    })
    
    $("#veil").on('mouseleave', function(){
    console.log("hide");
    $("#veil").hide();
      });

#opts-container {
  width: 100%;
  position: relative;
  transform:translateX(50px)
}

#veil {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.icons-group-s {
  height: 500px;
  text-align: center;
  padding-top: 10px;
  position:absolute;
  top: 0;
}

.icons-group-s div {
  width: 100px;
  height: 100px;
  background: #f00;
  margin-left: 10px;
  display: inline-block;
  position: relative;
}

#policy {
  z-index: 102;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="veil">

    </div>

    <div id="opts-container" class="hor menu-bottom">
        <div class="icons-group-s">
            <div id="policy" class="text-under-icon"></div>
            <div id="military" class="text-under-icon" ></div>
            <div id="socity" class="text-under-icon"></div>
            <div id="eco" class="text-under-icon" ></div>
            <div id="inventory" class="text-under-icon" ></div>
         
        </div>
    </div>

我想到的可能的解决方案

1-制作裁剪覆盖

2- 将焦点对象克隆到 veil div 内

3- 聚焦对象的父级并降低子元素的不透明度(解决方法)

即使元素具有 transform 样式，我如何在叠加层上弹出一个元素？

也许是黑客攻击？

Answer 1

考虑元素上的大框阴影而不是覆盖:

#opts-container {
  width: 100%;
  position: relative;
  transform:translateX(50px)
}


.icons-group-s {
  height: 500px;
  text-align: center;
  padding-top: 10px;
  position:absolute;
  top: 0;
}

.icons-group-s div {
  width: 100px;
  height: 100px;
  background: #f00;
  margin-left: 10px;
  display: inline-block;
  position: relative;
}

/* Make sure the stacking context is also on the top */
#opts-container:hover {
  z-index:9999;
}
/* make the element on the top and add a big shadow
   100vw + 100vh will make sure that you will cover all the screen
   Or use any other big value
*/
#opts-container:hover  #policy {
  position:relative;
  z-index:9999;
  box-shadow:0 0 0 calc(100vw + 100vh) rgba(0,0,0,0.5);
}

    <div id="opts-container" class="hor menu-bottom">
        <div class="icons-group-s">
            <div id="policy" class="text-under-icon"></div>
            <div id="military" class="text-under-icon" ></div>
            <div id="socity" class="text-under-icon"></div>
            <div id="eco" class="text-under-icon" ></div>
            <div id="inventory" class="text-under-icon" ></div>
         
        </div>
    </div>