以编程方式在其他元素前面呈现UI元素，而不使用同级索引(2D)

<div id="element1" style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: red;"></div>
<div id="element2" style="position: absolute; top: 70px; left: 70px; width: 100px; height: 100px; background-color: blue;"></div>
<button onclick="bringToFront('element1')">Bring Element 1 to Front</button>
<button onclick="bringToFront('element2')">Bring Element 2 to Front</button>

#element1, #element2 {
  z-index: 1; /* 初始z-index值 */
}

function bringToFront(elementId) {
  // 获取当前页面中所有具有z-index属性的元素
  const elementsWithZIndex = Array.from(document.querySelectorAll('[style*="z-index"]'));
  
  // 找到当前元素的z-index值
  const currentElement = document.getElementById(elementId);
  let maxZIndex = -Infinity;
  
  // 找到最大的z-index值并加1
  elementsWithZIndex.forEach(el => {
    const zIndex = parseInt(el.style.zIndex, 10);
    if (!isNaN(zIndex) && zIndex > maxZIndex) {
      maxZIndex = zIndex;
    }
  });
  
  // 设置新的z-index值
  currentElement.style.zIndex = maxZIndex + 1;
}