作品集问题：鼠标悬停元素导致页面整体右移

要解决悬停时元素展开导致页面右移的问题，核心是让隐藏的全名部分脱离文档流，使其显示/隐藏不会干扰其他元素的位置。通过position: absolute配合父元素的position: relative就能实现，具体步骤如下：

1. 修改CSS样式 #

针对你的HTML结构，添加或调整以下CSS规则：

.Name {
  position: relative; /* 给父元素设置相对定位，作为绝对定位元素的参考容器 */
  white-space: nowrap; /* 避免名字换行 */
}

#zk-trigger {
  position: relative; /* 让隐藏元素以这个容器为定位基准 */
}

.hide {
  position: absolute; /* 脱离文档流，不占据页面空间 */
  left: 100%; /* 让隐藏部分紧跟在缩写文字的右侧 */
  top: 0;
  visibility: hidden; /* 默认隐藏，比display:none更便于添加过渡效果 */
}

#zk-trigger:hover .hide {
  visibility: visible; /* 鼠标悬停时显示全名 */
}

2. 关键逻辑说明 #

• position: relative：给父元素建立定位上下文，确保绝对定位的隐藏部分不会偏离目标位置。
• position: absolute：让隐藏的文字脱离正常布局流，显示时不会挤压其他元素，自然不会导致页面整体右移。
• left: 100%：保证隐藏部分刚好衔接在缩写文字的末尾，视觉上呈现连贯的全名效果。

3. 可选优化 #

如果担心展开的全名遮挡页面其他内容，可给.hide添加层级控制：

.hide {
  /* 保留原有样式 */
  z-index: 10; /* 确保全名显示在其他元素上方 */
}

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