javascript - 有没有一种方法可以计算所有 DOM 元素的堆叠上下文，以便使用 JavaScript 比较上述位置的任意两个元素？

Question

我正在尝试比较 DOM 中的任意两个元素，以查看它们是否在同一区域(坐标重叠)中绘制(在屏幕上呈现)，其中一个将位于另一个之上。这个问题不是关于重叠计算，而是关于比较来自 DOM 树任何部分的任何两个元素的上述位置(计算堆叠上下文和 z-index 以及 HTML 层次结构......)。

虽然我是这个领域的新手，但我的方法是遍历并为每个 HTML 元素分配一个数值，同时考虑到规则和标准。另一个问题是正确获取它们。我找不到已经执行此操作的 JS 库。

对于 css 和完整的代码示例，请参见... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

预期输出能够比较任意两个 HTML 元素的上方或下方位置 (3D)。如果我从这里的专业人士那里得到一个想法并能够实现它，我将分享我的代码。感谢任何帮助。

Answer 1

最简单的方法是使用 document.elementsFromPoint()这将为您提供所有元素，嗯，在给定的点，按堆叠顺序。

复杂的部分是您需要找到两个元素相交的点。

以下示例将搜索最左上角的共享点，并说明您必须更精确地定义约束，因为它会故意错过仍在元素之间的元素:

test( 'red', 'blue' ); // -2 (blue:2, red:4)
test( 'red', 'green' ); // -2 (green:1, red:4) but at selected point blue is not visible
test( 'yellow', 'green' ); // -1 (yelow:3, green:1) but at selected point blue is not visible
test( 'blue', 'green' ); // -1 (blue:2, green: 1)

function test( class1, class2 ) {

  const elem1 = document.querySelector( '.' + class1 );
  const elem2 = document.querySelector( '.' + class2 );
  console.log( class1, class2, getStackDistance( elem1, elem2 ) );

}
function getStackDistance( elem1, elem2 ) {

  const shared_point = findSharedPoint( elem1, elem2 );
  if( !shared_point ) {
    console.error( 'no shared point' );
    return NaN;
  }
  const full_list = document.elementsFromPoint( shared_point.x, shared_point.y );

  return full_list.indexOf( elem1 ) - full_list.indexOf( elem2 );

}
// returns top-left-most shared point between two elements
function findSharedPoint( elem1, elem2 ) {

  const bbox1 = elem1.getBoundingClientRect( elem1 );
  const bbox2 = elem2.getBoundingClientRect( elem2 );
  const intersect_box = {
    left: Math.max( bbox1.left, bbox2.left ),
    right: Math.min( bbox1.right, bbox2.right ),
    top: Math.max( bbox1.top, bbox2.top ),
    bottom: Math.min( bbox1.bottom, bbox2.bottom )
  };
  if( intersect_box.left > intersect_box.right ||
    intersect_box.top > intersect_box.bottom ) {
    return null;  
  }

  return { x: intersect_box.left, y: intersect_box.top };
  
}

.box {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: 0.7;
}
.red {
  background: red;
  top: 20px;
  left: 20px;
  z-index: 4;
}
.blue {
  background: blue;
  top: 40px;
  left: 40px;
  z-index: 2;
}
.yellow {
  background: yellow;
  top: 10px;
  left: 20px;
  z-index: 3;
}
.green {
  background: green;
  top: 40px;
  left: 10px;
  z-index: 1;
}

<div class="box red"></div>
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box green"></div>