按钮触发加载图片时#heart无法覆盖#background且定位失效求助

嘿，别慌！我来帮你搞定这个问题～

你现在碰到两个头疼的问题：#heart完全挪不动，还没法盖在#background上面。咱们拆解一下原因，再给你解决方案：

为啥会这样？ #

1. 定位方式没选对：你给#heart用了position: relative，这种定位是基于它自己原本的位置来偏移的，而且如果父容器.action没设置定位，你设的left/top可能根本达不到你想要的效果，甚至看起来完全没变化。
2. DOM顺序拖了后腿：你的#heart写在#background前面，默认情况下，HTML里后出现的元素会叠在先出现的元素上面——哪怕你给#heart设了超高的z-index，如果定位的上下文不对，这层关系也不会反转。

怎么改？ #

咱们调整一下定位逻辑，几步就能搞定：

1. 先给父容器.action加个定位，让它成为子元素的定位参考：

.action {
  position: relative; /* 关键！子元素的绝对定位会以它为基准 */
  width: 800px; /* 和背景图宽度保持一致，方便精准定位 */
  margin: 0 auto;
}

2. 把#heart的定位改成绝对定位，这样你就能自由控制它在父容器里的位置，还能轻松盖在背景上：

#heart {
  z-index: 999; /* 不用设99999这么夸张，比背景图的层级高就行 */
  left: 200px;
  top: 100px;
  height: 100px;
  width: 100px;
  position: absolute; /* 把relative换成absolute */
}

3. 简化#background的样式，去掉没必要的设置：

#background {
  width: 800px;
  display: none; /* 点击按钮时记得把这个改成block，不然背景图不显示哦 */
  /* 这里可以删掉position: relative和z-index: -10，因为父容器已经定位，且heart的层级更高 */
}

这样改完之后，#heart就会跟着.action容器的位置走，你设的left/top也能精准生效，而且绝对定位的元素会脱离文档流，自然就能盖在#background上面啦！

你试试看这个方案，应该就能解决你的困境啦～

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