html - 位置相对div内的绝对？

Question

基本上我有两张图片，一张没有灯，一张有灯，当用户将鼠标悬停在图片上时，它会打开灯。

我试图将灯定位到具有绝对位置的特定位置，这很好，但每当我缩放页面时它都会改变位置，现在我知道这是因为它超出了页面的流动范围所以我阅读了相关内容topics 将其放在具有相对位置的 div 中，我已经这样做了，但它仍然不起作用。

#cont {
  position: relative;
  height: 100%;
}
#cont a {
  position: absolute;
  bottom: 69px;
  left: 350px;
}
.foo img:last-child {
  display: none
}
.foo:hover img:first-child {
  display: none
}
.foo:hover img:last-child {
  display: inline-block
}

<section class="flexheader">
  <img class="logo" alt="" src="image/logo.png">
  <img class="house" alt="" src="image/house.png">
  <div id="cont">
    <a class="foo" href="#">
      <img alt="" src="image/lampnolight.png">
      <img alt="" src="image/lamp.png">
    </a>
  </div>
</section>

Answer 1

您需要使用它来使缩放工作完美:

.flexheader,
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

片段

.flexheader,
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#cont {
  position: relative;
  height: 100%;
}
#cont a {
  position: absolute;
  bottom: 69px;
  left: 350px;
}
.foo img:last-child {
  display: none;
}
.foo:hover img:first-child {
  display: none;
}
.foo:hover img:last-child {
  display: inline-block;
}

<section class="flexheader">
  <img class="logo" alt="" src="//placehold.it/100?text=logo" />
  <img class="house" alt="" src="//placehold.it/100?text=house" />
  <div id="cont">
    <a class="foo" href="#">
      <img alt="" src="//placehold.it/100?text=lampnolight" />
      <img alt="" src="//placehold.it/100/ccf?text=lamp" />
    </a>
  </div>
</section>