如何调试重叠的 div 元素？

Question

我正在寻找一个指南来检查 div（是否使用引导网格）元素是否重叠。到目前为止，我已经使用 chrome 开发者工具检查了位置和不匹配的标签。

Answer 1

您正在寻找碰撞检测。以下 Javascript 代码显示了如何检测重叠的 HTML div 标签。 请在此处找到更多信息：How to detect overlapping elements

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}