CSS新手求助：Hover文本时将图片固定至指定位置

嘿，作为CSS新手遇到这个问题太正常了，我来帮你理顺问题根源，然后直接给你可行的解决方案！

问题出在哪？ #

你现在给#image用了position: relative，这个定位是相对于元素自身原本的位置偏移的，再加上你用了相邻兄弟选择器#text:hover+#image，图片本身又紧跟在文本旁边，所以不管怎么调right值，它都会围着文本转，根本没法跑到页面的特定位置。

核心解决方案：绝对定位+父容器参考 #

要让图片固定在你想要的位置，你需要用position: absolute，同时给图片的父容器设置position: relative，这样图片就会相对于父容器来定位，彻底脱离文本的“束缚”。

调整后的CSS代码

/* 给父容器设置相对定位，作为绝对定位元素的参考基准 */
#hotlistContainer {
  position: relative;
  /* 可选：加padding避免图片覆盖容器内其他内容 */
  padding-right: 220px;
}

#image {
  display: none;
  /* 改用绝对定位，脱离正常文档流 */
  position: absolute;
  /* 这里设置你想要的特定位置，比如父容器的右上角 */
  top: 0;
  right: 0;
  /* 可选：设置图片尺寸，避免过大 */
  width: 200px;
  height: auto;
}

/* 如果图片不是紧跟在#text后面，用通用兄弟选择器~代替+，只要是#text后面的兄弟元素就行 */
#text:hover ~ #image {
  display: block;
}

对应的HTML结构示例

<div id="hotlistContainer" class="col-md-6">
  <div class="col-md-5">
    <p id="text">这里是你需要悬停触发的文本内容</p>
    <!-- 图片可以放在容器内任意位置，不用紧贴文本 -->
    <img id="image" src="你的图片URL地址" alt="悬停显示的图片">
  </div>
</div>

进阶小技巧 #

如果你想让图片固定在整个浏览器页面的某个位置（比如右上角，不随页面滚动），那把position: absolute改成position: fixed就行，连父容器的relative都不用加：

#image {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
}

这样调整后，鼠标悬停文本时，图片就会乖乖显示在你指定的位置啦！

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