如何避免text-selection contextmenu被遮挡至背景层？

选择角落处的文本时，文本选择工具栏会被遮挡到背景层，如何让这个工具栏始终保持可见？

已尝试的实现代码 #

JavaScript #

document.onselectionchange = () =>{
    var toolbar = document.getElementById('tools_panel');
    console.log('toolbar toolbar',toolbar);

    var sel = getSelection();

    if (sel.rangeCount > 0)
    {
      var ran = sel.getRangeAt(0);

      if (ran.collapsed === false)
      {
        var rect = ran.getBoundingClientRect();
        var rectTop = rect.top;
        var rectCenter = rect.left + (rect.width / 2);

        toolbar.style.display = "";
        toolbar.style.left = (rectCenter - (toolbar.offsetWidth / 2)) + "px";
        toolbar.style.top = (rectTop - toolbar.offsetHeight) + "px";

        if (parseFloat(toolbar.style.top) < 0)
        {
          toolbar.style.top = "0px";
        }
        if (parseFloat(toolbar.style.left) < 0)
        {
          toolbar.style.left = "0px";
        }
        toolbar.style.display = 'block';
        this.isEditorPanelShowed = true;
      }
      else
      {
        toolbar.style.display = "none";
      }
    }
    else
    {
      toolbar.style.display = "none";
    }
}

CSS #

.tools-ul{
   display: flex;
    list-style: none; 
}

.tools-ul li{
  border: 1px solid red;
  padding: 15px;
}

#tools_panel{
  display:none;
}

HTML #

<div id="text-selection-area">
  
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam, ducimus totam quae inventore fuga, ullam velit, corporis eveniet dignissimos deleniti ab necessitatibus adipisci corrupti deserunt possimus earum illo nostrum neque. In, quas vel rerum recusandae officiis, voluptate quidem nostrum dolor fuga corporis delectus debitis perspiciatis aliquid dignissimos quaerat temporibus ex tempore quo provident quam laborum exercitationem? Perferendis, sequi. Id, provident consequatur vel eveniet vero voluptate possimus animi corrupti facilis enim. Voluptatem perspiciatis officia molestias officiis aut, provident adipisci exercitationem tempore corrupti magni temporibus eos quis aspernatur consequuntur quod. Rerum aspernatur exercitationem dolor recusandae numquam modi pariatur temporibus nemo, voluptatem ad veritatis ducimus itaque velit, vitae doloremque necessitatibus, distinctio beatae provident nam consequatur debitis suscipit neque enim! Eos nesciunt inventore consectetur, odio ad non, optio, aspernatur dolor distinctio officiis sint quam corrupti sed voluptatem atque suscipit voluptate harum dolores deleniti facere recusandae. Dolore, quos. Aliquid non similique minima exercitationem dolorem assumenda doloremque eligendi facilis, odit expedita in voluptas eius unde nostrum id harum quisquam. Error similique cum soluta unde at, ipsa laborum quae ad alias laudantium rem. Inventore eligendi minima id consequatur dicta, est totam sit, maiores, eos sunt cupiditate? Molestiae esse labore voluptates, dolor natus aspernatur, non illum libero obcaecati ut alias veritatis reprehenderit praesentium incidunt, suscipit consectetur ex ea autem voluptatem beatae debitis iste! Facilis explicabo asperiores minus cumque. Quam aliquid, possimus nemo saepe amet, maiores debitis iusto tempore soluta repellendus quasi, reprehenderit iste consequuntur expedita optio mollitia. Doloremque enim a quod deleniti voluptates quas nesciunt expedita placeat quam aspernatur itaque officia ad consequatur qui et laudantium similique amet, maiores facilis! Sunt doloribus fugit aspernatur. Eius unde libero ipsum eligendi! Iste quae laboriosam praesentium, at, consectetur modi, maiores non asperiores ullam suscipit doloremque sapiente quis laudantium nobis mollitia totam repellendus eos tempora aliquam reiciendis rerum natus accusamus unde. Odit temporibus repudiandae minus nostrum voluptatum atque hic eum possimus suscipit necessitatibus maiores tenetur asperiores illum eius sapiente voluptas rem soluta, accusamus alias earum incidunt, similique repellendus explicabo. Quo neque doloremque sed iusto laboriosam consequatur, quaerat fugit non accusantium illo corrupti velit ea, deleniti veritatis architecto! Ut sapiente quaerat corrupti ad illum dolorum, voluptates quidem. Nam cumque maxime corporis libero numquam ipsum fuga a nulla temporibus modi ducimus enim minus tempora eum, vitae nemo minima perferendis. Enim illum quidem sunt! Quis saepe earum ea temporibus laboriosam perspiciatis hic, nemo ratione error ad eaque asperiores consequatur in praesentium accusantium, vero laborum dolorem?
  
</div>

<div id="tools_panel" style="position:absolute;background:#eaeaed;padding:3px;">
   <ul class="tools-ul">
     <li>Bold</li>
     <li>Italic</li>
     <li>Underline</li>
     <li>O-list</li>
     <li>U-list</li>
     <li>Fill</li>
     <li>Font +-</li>
   </ul>
</div>

解决方案 #

1. 提升工具栏层级 #

给工具栏设置足够高的z-index，确保它始终处于页面元素最上层：

#tools_panel{
  display:none;
  position:absolute;
  z-index: 9999;
}

2. 完善边界适配逻辑 #

当前代码只处理了工具栏顶部、左侧超出视口的情况，补充右侧、底部的适配，避免部分区域被遮挡：

// 在设置toolbar的top和left后添加以下代码
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

// 处理右侧超出视口
const toolbarRight = parseFloat(toolbar.style.left) + toolbar.offsetWidth;
if (toolbarRight > viewportWidth) {
  toolbar.style.left = (viewportWidth - toolbar.offsetWidth) + "px";
}

// 处理底部超出视口（可选：将工具栏移至选中文本下方）
const toolbarBottom = parseFloat(toolbar.style.top) + toolbar.offsetHeight;
if (toolbarBottom > viewportHeight) {
  toolbar.style.top = (rectTop + rect.height) + "px";
}

3. 确保定位上下文正确 #

如果页面存在其他定位父元素，可能导致工具栏定位异常，可将工具栏改为固定定位，始终相对于视口定位：

#tools_panel{
  display:none;
  position:fixed;
  z-index:9999;
}

以上修改后，工具栏就能始终保持可见，不会被页面元素遮挡，同时在视口边缘也能完整显示。

内容的提问来源于stack exchange，提问作者EaBengaluru