我用document.elementFromPoint模拟了html元素的出栈顺序

首先是个标题党了，是因为无意间看到了elementFromPoint这个api，这个api是【给定的坐标点处的顶端 Element】，然后我就本地试试一些特性，然后突发奇想了下，如果这个元素比如有多层定位覆盖，上层定位元素display:none（隐藏时）是不是继续能拿到顶层元素。

防止浪费大家时间，我就先上个效果：

一个div中有三个元素，大小一样只是显示层级不一样，最上面元素被第一个取出来，后面元素依次，这个效果是不是很像出栈的效果。

代码链接

测试元素（三个元素叠加在一起宽度高度相同，）

1. bottom-location-element 元素本身子元素 位于最底下
2. center-absolute-element 相对定位元素 位于中间
3. top-fixed-element fixed定位元素 位于最上面

测试元素样式

 #bottom-location-element {
  color: white;
  height: 300px;
  background-color: #533e85;
  cursor: pointer;
}
.center-absolute-element {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  color: red;
  transition: all 1s ease-in;
}
.top-fixed-element {
  position: fixed;
  left: 0;
  top: 0;
  width: 300px;
  aspect-ratio: 1 / 1;
  color: blue;
  padding-top: 40px;
  box-sizing: border-box;
  background-color: transparent;
  transition: all 1s ease-in;
}

静态html元素

绑定事件及其处理

移除事件

elementFromPoint应该对拖拽的时候层级显示控制应该有很大的用处。