CSS定位Hover/Pop-up Div：符号浏览器网页位置控制需求

我正在制作一款Glyph浏览器网页，需求是当用户悬停在小尺寸Glyph上时，显示大尺寸的对应Glyph（尺寸后续可能调整）。目前已通过HTML和CSS实现基础功能，但无法控制弹出的大Glyph（.glyph-pop）的显示位置，希望能将其精准定位在对应小Glyph的正下方。

当前效果参考：

解决思路 #

绝对定位元素会相对于最近的定位父元素（position值为relative/absolute/fixed/sticky的元素）定位。当前.glyph-pop是position: absolute，但父元素.glyph未设置定位，导致弹出层相对于整个页面定位，无法精准对齐。只需给.glyph添加相对定位，再调整弹出层的定位参数即可解决。

修改后的完整代码 #

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Glyph browser</title>
    <style>     
        body {
            background-color: black;
        }
        .gridcontainer {
            margin-left: 3rem;
            display: grid;
            grid-template-columns: repeat(16, 1fr);
        }
        .gridcell {
            color: white;
            border: 0.1px solid gray;
            padding: 1rem;
            text-align: center;
        }
    
        p {
            text-align: center;
            margin: 2rem;
            font-size: 1rem;
            color: white;
        }
    
        p.unicode {
            font-size: 0.5rem;
        }
        /* 给父容器添加相对定位，作为弹出层的定位基准 */
        .glyph {
            position: relative;
        }
        .glyph-pop {
            display: none;
            position: absolute;
            z-index: 10;
            /* 定位到父容器底部 */
            top: 100%;
            /* 水平居中对齐父容器 */
            left: 50%;
            transform: translateX(-50%);
            /* 可选：添加间距避免紧贴小图标 */
            margin-top: 0.5rem;
        }
        .glyph-display {
            font-size: 5rem;
        }
        .glyph:hover .glyph-pop
        {
            display: inline-block;
        }
        .glyph-pop p {
            background-color: black;
            font-size: 20rem;
            color: orange;
            /* 移除默认margin，优化弹出层布局 */
            margin: 0;
        }
        .glyph-pop .unicode {
            color: orange;
            font-size: 2rem;
            margin: 0.5rem 0;
        }
    
        .glyph a {
            font-style: normal;
            font-weight: bold;
            color: inherit;
            text-decoration: none;
        }
</style>
</head>
<body>
<h1>
    Glyph browser
</h1>
<div class="gridcontainer">
    <div class="glyph">
        <p class="glyph-display" title="exclamation mark Punctuation, Other">
            <a>!</a>
        </p>
        <p class="unicode">
            0021
        </p>
        <div class="glyph-pop">
            <p>
                !
            </p>
            <p class="unicode">
                U+0021
            </p>
        </div>
    </div>
    <div class="glyph">
        <p class="glyph-display" title="exclamation mark Punctuation, Other">
            <a>@</a>
        </p>
        <p class="unicode">
            0022
        </p>
        <div class="glyph-pop">
            <p>
                @
            </p>
            <p class="unicode">
                U+0022
            </p>
        </div>
    </div>
    <div class="glyph">
        <p class="glyph-display" title="exclamation mark Punctuation, Other">
            <a>#</a>
        </p>
        <p class="unicode">
            0023
        </p>
        <div class="glyph-pop">
            <p>
                #
            </p>
            <p class="unicode">
                U+0023
            </p>
        </div>
    </div>
</div>
</body>
</html>

关键修改点说明 #

1. 给.glyph添加position: relative：让弹出层的绝对定位以当前小图标容器为基准，而非整个页面。
2. 设置.glyph-pop的定位参数：top: 100%将弹出层顶部对齐到父容器底部，实现正下方定位；left: 50%+transform: translateX(-50%)让弹出层水平居中，确保与小图标精准对应。
3. 优化弹出层内边距：移除p元素默认的大margin，让弹出层布局更紧凑。

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