如何让元素相对于自身而非父元素缩放？及如何将导航栏图片的Tooltip居中对齐图片？

我正尝试为导航栏中的图片制作Tooltip，但无法实现居中对齐。具体来说，我的导航栏中有一个div，鼠标悬停时会显示Tooltip，我希望Tooltip的中心与div内图片的中心对齐。问题在于我无法使用left:50%，因为该属性参考的是父级导航栏的宽度（100%），这会将Tooltip定位在整个屏幕的中间，而非div的中间。有没有办法让它不参考父级宽度，而是以自身宽度的50%来定位？

这个问题的核心是绝对定位元素的参考系——默认情况下，绝对定位的元素会找最近的position值不是static的父元素作为定位参考。你的导航栏header是sticky（属于已定位元素），所以Tooltip默认会以它为参考，这就导致left:50%会指向整个导航栏的中间。

要解决这个问题，只需要两步：

1. 给Tooltip的容器（.water-container和.fairy-container）添加position: relative，让它们成为内部绝对定位元素的参考容器
2. 用left: 50% + transform: translateX(-50%)的组合实现Tooltip自身的水平居中——transform的百分比是基于元素自身宽度的，刚好能让Tooltip中心对齐容器中心

下面是修改后的完整CSS代码，我已经帮你调整好了关键部分：

*{ margin: 0; padding: 0; border: none; box-sizing: border-box; text-decoration: none; list-style: none; }
body{ background-color:rgb(80,155,192); }
header{ display: grid; grid-template-columns: 25% 20% 5% 5% 20% 25%; /* 1 2 3 4 5 6*/ justify-content: center; align-items: center; width: 100%; background-color: white; position: sticky; top: 0; z-index:1; }
header h1{ grid-column: 1; margin-left: 5%; padding:10px; font-size: 40px; font-weight: 500; color:rgb(80,155,192); cursor: pointer; transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
header h1:hover{ color: black; }
header h1 a:visited{ color:rgb(80,155,192); }

/* 调整water容器和Tooltip样式 */
.water-container{ grid-column: 3; background:gray; position: relative; /* 新增：让容器成为定位参考 */ }
.water-container:before{ 
    position: absolute; 
    bottom: 120%; /* 把Tooltip放在图片上方，避免遮挡 */
    left: 50%; /* 相对于容器的水平中点 */
    transform: translateX(-50%); /* 自身左移50%宽度，实现居中 */
    content: attr(title); 
    color:white; 
    padding:0.5rem; 
    border-radius: 0.3rem; 
    background: #333;
    white-space: nowrap; /* 防止Tooltip内容换行 */
}
.water-container:after{ display: none; /* 隐藏默认的空:after元素 */ }

/* 调整fairy容器和Tooltip样式 */
.fairy-container{ grid-column: 4; position: relative; /* 新增：让容器成为定位参考 */ }
.fairy-container:hover:after{ 
    content: attr(data-tooltip); 
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    color:white;
    padding:0.5rem;
    border-radius: 0.3rem;
    background: #333;
    white-space: nowrap;
}

.water-icon{ display: block; margin:auto; width:3rem; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transform-origin: center; }
.water-icon:hover{ transform: scale(1.2); }
.fairy-icon{ display: block; margin:auto; width:3rem; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transform-origin: center; }
.fairy-icon:hover{ transform: scale(1.2); }
nav { grid-column: 6; }
.nav_links li{ display: inline-block; margin-inline: 30px; }
.nav_links li a{ display: inline-flex; justify-content: center; align-items: center; font-size: 15px; width: 100px; height: 40px; border-radius: 50px; background-color: rgb(80,155,192); color: white; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.nav_links li a:hover{ background-color: rgb(60, 136, 173); }

为什么这样有效？ #

• position: relative：给容器设置后，内部的绝对定位Tooltip就会以这个容器的边界为基准，而不是向上找导航栏作为参考
• left: 50%：让Tooltip的左边缘对齐容器的水平中心
• transform: translateX(-50%)：这一步是关键——transform的百分比值是相对于元素自身的尺寸，所以向左移动自身宽度的50%，就能让Tooltip的中心和容器的中心完全对齐

这样调整后，你的Tooltip就会精准对齐图片的中心啦！

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