无法隐藏 z 索引设置为 1 的同级元素

Question

我有一个模态覆盖另一个元素。下部元素上的关闭按钮的 z 索引设置为 1。当我创建模态时，这个原始关闭按钮仍然嵌套在新模态及其新关闭按钮的顶部。

我

尝试在 dom 中抓取这个元素并将其隐藏，但由于它不是父元素，我看不出如何。

编辑：这是伪代码...问题是如何删除覆盖的同级元素。

<div>
  <div>
    <img style={{z-index: 1; position: fixed;}}>close button (sibling, this one needs to be moved underneath or hidden)</img>
  </div>
<div>
<div>
  <div>
    <img style={{z-index: 1; position: relative;}}>close button (popup modal)</img>
  </div>
</div>

已解决：事实证明，无论元素在 DOM 层次结构中的位置如何(添加 id 后(，我都可以通过其 id 抓取元素并切换其显示。不知道为什么我不这么认为。̄_(ツ(_/̄

const closeBtn = document.getElementById('closeBtnSibling');
closeLessonBtn.style.display = 'none';

和

closeLessonBtn.style.display = null;

Answer 1

style={z-index: 1; position: fixed;} -> style={{zIndex: 1, position: 'fixed'}}

反应内联样式参考：https://reactjs.org/docs/dom-elements.html#style

Answer 2

你想完成什么？您是否有机会使用 CSS 或 SASS 进行样式设置？

固定位置应始终具有宽度。

例如：

.fixed {
   position: fixed;
   top: 0; 
   left: 0;
   width: 100%;
   padding: 20px;
   background: rgba(255,255,255,.5);
}

确保将 HTML 和 BODY 设置为 100% 的宽度和高度。

为固定关闭按钮提供更高的索引。

此外，另一个简单的提示是不要使用空div。只需将其包装为占位符，这样在检查元素时它就不会在源中输出。