如何让hover显示的绝对定位div背景不透明且不影响父元素高度？

我来帮你搞定这个问题！你遇到的两个核心问题其实很好解决，咱们一步步来：

问题原因分析 #

• 设position: absolute时背景透明：因为你没给#message设置明确的背景色，浏览器默认背景是透明的，所以遮不住下面内容。
• 设position: relative时影响父div高度：因为relative元素仍在正常文档流中，它的显示/隐藏会改变父元素的高度。

解决方案 #

只需要做两个小调整：

1. 给#message添加背景色，比如白色background-color: #ffffff;，这样就能遮挡下方内容了。
2. 把#message的父元素设置为position: relative;，这样absolute定位的#message会相对于父元素定位（不会乱跑），同时因为absolute元素脱离文档流，完全不会影响父元素的高度。

修改后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 给父元素添加relative定位，作为子元素的定位上下文 */
        #hover {
            position: relative;
            /* 可以加个样式方便看效果 */
            padding: 10px;
            border: 1px solid #ccc;
        }
        #message {
            border: 1px solid;
            padding: 10px;
            box-shadow: 5px 10px #888888;
            position: absolute;
            display: none;
            /* 添加背景色，解决透明问题 */
            background-color: #ffffff;
            /* 可以调整定位位置，比如在父元素下方 */
            top: 100%;
            left: 0;
            margin-top: 5px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="hover">鼠标悬停这里显示消息</div>
    <div id="message">这是要显示的消息内容，现在背景不透明啦！</div>

    <script>
        $(document).ready(function() {
            $("#hover").hover(function() {
                $("#message").toggle();
            });
        });
    </script>
</body>
</html>

关键说明 #

• 父元素设position: relative：这是为了让absolute的子元素以它为基准定位，否则子元素会相对于整个页面定位，可能跑到奇怪的位置。
• 背景色设置：必须明确指定background-color，否则默认透明，无法遮挡下方内容。
• position: absolute：元素脱离正常文档流，所以它的显示/隐藏完全不会影响父元素或其他元素的布局，完美解决高度变化的问题。

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