文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使弹出弹出在一切面前充分显示？

问如何使弹出弹出在一切面前充分显示？
EN

Stack Overflow用户
提问于 2021-10-14 04:43:58
回答 1查看 378关注 0票数 1

​

代码语言：javascript
复制
.details {
      position: relative;
    }

    .details div {
        --bgcolor: #ffecec;
        --bdcolor: 2px solid #de8273;
        position: absolute;
        top: 0;
        transform: translateX(-125%) translateY(-7%);
        display: none;
        background: var(--bgcolor);
        z-index: 20;
        padding: 1rem;
        border: var(--bdcolor);
        width: 150px;
        border-radius: 5px;
            box-shadow: 1px 1px 2px 2px #a08c8c;
    }
    .details div:after{
       content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        border-bottom: var(--bdcolor);
        border-right: var(--bdcolor);
        background: var(--bgcolor);
        left: 98.5%;
       transform: rotate(315deg);
        top: 10px;
    }
    .details:hover div {
      display: inline;
    }
    .tab{
        border-collapse : collapse;
        width : 100%;
        }
    .tab td{
         padding: 3px;
          font-size: 14px;
        }

    .tab tr:hover td{
        background:#20b5cc1f;
    }

    .tab th{
         padding: 4px;
        font-weight: normal;
        border: 1px solid black; 
         }
    .tab tr:nth-child(even) {
        background-color: #f2f2f2;
        }
    .tab tr:nth-child(odd) {
        background-color: yellow;
        }
    .container{
        border: 2px solid blue;
        padding: 4px;
        width: 500px;
        margin: 0 auto;
        overflow: auto;
        height: 200px;
    }
代码语言：javascript
复制
<div class="container">
    <table class="tab">
    <tr>
    <th>Column-1</th>
    <th>Column-2</th>
    <th>Column-3</th>
    </tr>
    <tr>
    <td>Row-1</td>
    <td>Row-1</td>
    <td class='details'>Hover-1
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-1</td>
    <td>Row-1</td>
    <td class='details'>Hover-1
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    </table>
    </div>

​

如何使弹出弹出充分显示在前面的一切，同时徘徊在第3栏的数据。如果没有javascript或jquery，是否有可能实现。当我使容器div溢出时，它确实工作:可见，但这使得表从容器div中出来，这不是我想要的。我希望表在容器div中，当我在表数据上悬停时，弹出窗口应该完全显示在容器div之外。有人能帮我解决这个问题吗。提前谢谢你。

代码语言：javascript
复制
  .details {
      position: relative;
    }

    .details div {
        --bgcolor: #ffecec;
        --bdcolor: 2px solid #de8273;
        position: absolute;
        top: 0;
        transform: translateX(-125%) translateY(-7%);
        display: none;
        background: var(--bgcolor);
        z-index: 20;
        padding: 1rem;
        border: var(--bdcolor);
        width: 150px;
        border-radius: 5px;
            box-shadow: 1px 1px 2px 2px #a08c8c;
    }
    .details div:after{
       content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        border-bottom: var(--bdcolor);
        border-right: var(--bdcolor);
        background: var(--bgcolor);
        left: 98.5%;
       transform: rotate(315deg);
        top: 10px;
    }
    .details:hover div {
      display: inline;
    }
    .tab{
        border-collapse : collapse;
        width : 100%;
        }
    .tab td{
         padding: 3px;
          font-size: 14px;
        }

    .tab tr:hover td{
        background:#20b5cc1f;
    }

    .tab th{
         padding: 4px;
        font-weight: normal;
        border: 1px solid black; 
         }
    .tab tr:nth-child(even) {
        background-color: #f2f2f2;
        }
    .tab tr:nth-child(odd) {
        background-color: yellow;
        }
    .container{
        border: 2px solid blue;
        padding: 4px;
        width: 500px;
        margin: 0 auto;
        overflow: auto;
        height: 200px;
    }
代码语言：javascript
复制
<div class="container">
    <table class="tab">
    <tr>
    <th>Column-1</th>
    <th>Column-2</th>
    <th>Column-3</th>
    </tr>
    <tr>
    <td>Row-1</td>
    <td>Row-1</td>
    <td class='details'>Hover-1
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-1</td>
    <td>Row-1</td>
    <td class='details'>Hover-1
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    </table>
    </div>
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-14 05:02:26

1) --您可以通过首先找到相应的.details容器的top、left来轻松地获得结果。

代码语言：javascript
复制
const { top, left } = element.target.getBoundingClientRect();

2)将弹出的top设置为

代码语言：javascript
复制
child.style.top = `${top}px`

3)不要忘记将position: relative移到.details容器中。

代码语言：javascript
复制
.details{
  /* position: relative; */
}

JS代码

代码语言：javascript
复制
const details = Array.from(document.querySelectorAll(".details"));
details.forEach(detail => {
  detail.addEventListener("mouseover", element => {
    const { top, left } = element.target.getBoundingClientRect();
    const child = element.target.children[0];
    //child.style.left = `${left}px`
    child.style.top = `${top}px`
  })
})

​

代码语言：javascript
复制
const details = Array.from(document.querySelectorAll(".details"));
details.forEach(detail => {
  detail.addEventListener("mouseover", element => {
    const { top, left } = element.target.getBoundingClientRect();
    const child = element.target.children[0];
    //child.style.left = `${left}px`
    child.style.top = `${top}px`
  })
})
代码语言：javascript
复制
.details div {
  --bgcolor: #ffecec;
  --bdcolor: 2px solid #de8273;
  position: absolute;
  top: 0;
  transform: translateX(-125%) translateY(-7%);
  display: none;
  background: var(--bgcolor);
  z-index: 20;
  padding: 1rem;
  border: var(--bdcolor);
  width: 150px;
  border-radius: 5px;
  box-shadow: 1px 1px 2px 2px #a08c8c;
}

.details div:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-bottom: var(--bdcolor);
  border-right: var(--bdcolor);
  background: var(--bgcolor);
  left: 98.5%;
  transform: rotate(315deg);
  top: 10px;
}

.details:hover div {
  display: inline;
}

.tab {
  border-collapse: collapse;
  width: 100%;
}

.tab td {
  padding: 3px;
  font-size: 14px;
}

.tab tr:hover td {
  background: #20b5cc1f;
}

.tab th {
  padding: 4px;
  font-weight: normal;
  border: 1px solid black;
}

.tab tr:nth-child(even) {
  background-color: #f2f2f2;
}

.tab tr:nth-child(odd) {
  background-color: yellow;
}

.container {
  border: 2px solid blue;
  padding: 4px;
  width: 500px;
  margin: 0 auto;
  overflow: auto;
  height: 200px;
}
代码语言：javascript
复制
<div class="container">
  <table class="tab">
    <tr>
      <th>Column-1</th>
      <th>Column-2</th>
      <th>Column-3</th>
    </tr>
    <tr>
      <td>Row-1</td>
      <td>Row-1</td>
      <td class='details'>Hover-1
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-1</td>
      <td>Row-1</td>
      <td class='details'>Hover-1
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
  </table>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69565192

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档