相对于列表元素定位元素

如何解决相对于列表元素定位元素

我正在尝试在文件列表的每个元素旁边显示一个弹出式选项框。此窗口显示可用于该文件的选项。

我正在使用一个 onClick 函数，它可以在一个隐藏的和另一个可见的类之间切换。我的问题是，尽管您单击了文件，但该框始终放置在同一个位置，因此您似乎总是从第一个文件中打开选项。

React 代码：

return (
  <div className='file-row'>
    <div className='file-row-1'>
        <div className='checkbox-iconFile-container'>
          <input className='checkbox-folder' type="checkbox"/>
          <p id={props.id} className='file-name'><img className='resourceIcon'alt='tipo de documento' src={resourceIcon}></img>{newStr}</p>
        </div>
        <p className='file-date'>{date}</p>
        <p className='groups-file-text'>UBIP,...</p>
      </div>
      <div className='div-hidden-options'>
        <ModalResources></ModalResources>
        <div className='moreInfo-dots-container' onClick={showFileOptions}>
          <img className='moreInfo-dots' alt='Opciones' src={dots}></img>
        </div> 
        <div id='file-options' className='div-file-options-hidden'>
            <p>Modificar título</p>
            <p>Modificar archivo</p>
            <p>Mover recurso</p>
            <p>Eliminar recurso</p>
        </div>
       
      </div>
    </div>
)

showFileOptions 函数：

function showFileOptions () {

  let optionsDiv = document.getElementById('file-options');
  optionsDiv.classList.toggle('div-file-options-show');
}

和 CSS：

.div-hidden-options {
    width: 15%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.div-file-options-hidden {
    visibility: hidden;
    position: absolute;
}

.div-file-options-show {
    visibility: visible;
    position: absolute;
    margin-left: 15%;
    background-color: white;
    border: 1px solid #DDDDDD;
    padding: 5px;
    border-radius: 5px;
    margin-top: -36px;
}

无论我们单击哪个文件，框所在位置的图像：

这是单击第二个文件时框的理想行为：