如何用纯CSS/HTML实现悬停图标时上方显示文本且不移动元素

我有一个Profile图标，希望鼠标悬停该图标时，在图标上方显示“Profile”文本（而非当前的下方）。要求仅使用纯CSS/HTML实现，不使用JavaScript，且文本显示时不移动其他div元素。现有代码如下：

现有CSS代码 #

.hide {
  display: none;
}

.body {
    width: 400px;
    height: 100px;
    background: blue;
}

.myDIV {
height: 20px;
width: 20px;
background: url('https://i.imgur.com/gIELtaC.png');
}
    
.myDIV:hover + .hide {
  width: max-content;
  display: block;
  color: red;
  background: purple;
}

现有HTML代码 #

<div class="body">
    <div class="myDIV"></div>
    <div class="hide">Profile</div>

    <div class="myDIV"></div>
    <div class="hide">Another Profile</div>
</div>

要实现需求，核心是利用**绝对定位（position:absolute）**让提示文本脱离文档流（不影响其他元素布局），同时调整文本位置到图标上方，再通过:hover控制显示。修改后的代码如下：

修改后CSS代码 #

.body {
    width: 400px;
    height: 100px;
    background: blue;
    position: relative;
    padding-top: 25px; /* 预留提示文本空间，避免超出容器 */
}

.myDIV {
    height: 20px;
    width: 20px;
    background: url('https://i.imgur.com/gIELtaC.png');
    position: relative; /* 作为提示框的定位参照 */
    display: inline-block; /* 让图标横向排列 */
    margin-right: 20px; /* 图标间留间距 */
}

.hide {
    display: none;
    position: absolute;
    bottom: 100%; /* 定位到图标顶部上方 */
    left: 50%;
    transform: translateX(-50%); /* 提示框相对于图标水平居中 */
    color: red;
    background: purple;
    width: max-content;
    padding: 2px 6px;
    margin-bottom: 5px; /* 和图标间留空隙 */
}

.myDIV:hover .hide {
    display: block;
}

修改后HTML代码 #

<div class="body">
    <div class="myDIV">
        <div class="hide">Profile</div>
    </div>

    <div class="myDIV">
        <div class="hide">Another Profile</div>
    </div>
</div>

关键修改说明 #

• 调整HTML结构：将提示文本放入图标容器内部，直接通过.myDIV:hover .hide控制显示，比原相邻兄弟选择器逻辑更稳定。
• 绝对定位脱离文档流：提示框设置position:absolute后，其显示/隐藏不会挤压或移动其他元素，满足布局要求。
• 精准定位到上方：通过bottom:100%让提示框底部对齐图标顶部，再用transform: translateX(-50%)实现水平居中，视觉更协调。
• 定位参照设置：给.myDIV加position:relative，确保提示框以对应图标为基准定位，不会出现偏移。

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