时间戳

首页 > 解决方案 > 在浏览器的 100% 和 80% 缩放级别上，将弹出窗口保持在同一位置

css - 在浏览器的 100% 和 80% 缩放级别上，将弹出窗口保持在同一位置

问题描述

我有一个弹出窗口，在浏览器上以不同的缩放级别略有移动。无论用户是使用 100% 缩放还是 80% 缩放，我都希望它位于同一个位置。

这是它目前在 100% 缩放时的样子

100% 缩放

这是它在 80% 缩放时的样子

80% 缩放

弹出窗口正在远离右侧的Retirement Projection文本

这是我的弹出代码

.savings-tip {
  background-color: #1a202c;
  box-shadow: 0 2px 20px 8px rgba(0, 0, 0, 0.05);
  margin-top: 445px;
  width: 35%;
  position: absolute;
  margin-left: 515px;
  height: 230px;
  padding: 0%;
}

这是基本父级（popup-wrap）和popup的stackblitz示例

https://stackblitz.com/edit/angular-ivy-jhpbg3?file=src/app/app.component.html

标签： css

解决方案

你可以通过这支笔，你会对此有更好的理解：

https://codepen.io/prathameshkoshti/pen/ZEOmYLP

所以基本上我用菜单类创建了这个父 div，并添加了一个可以悬停鼠标的跨度，默认情况下弹出窗口将被隐藏。

<div class="menu">
    <span>Hover over me (positioned relatively)</span>
    <div class="popup">
        the content with absolute positioning
    </div>
</div>

我将带有类菜单的父 div 保持为相对，并且将带有类弹出窗口的 div 设置为绝对。这样，弹出窗口将永远不会离开它的位置，简而言之，它将始终坚持跨度（视觉上），或者您可以说父 div（技术上）。

body {
    margin: 0;
    display: grid;
    place-items: center;
    height: 100vh;
}

.menu {
    position: relative;
}

.menu:hover > .popup{
    display: block;
}

.popup {
    display: none;
    position: absolute;
    background: black;
    color: #fff;
    padding: 10px;
    top: -10px;
    left: 110%;
    width: 200px
}

推荐阅读