相对位置 div 内的绝对值？

Question

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

我正在尝试将 lamp 定位到具有绝对位置的特定位置，这很好，但是每当我缩放页面时它都会改变位置，现在我知道这是因为它不在页面，所以我阅读了相关主题，将其放在具有相对位置的 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>

相对位置 div 内的绝对值？

Absolute within position relative div?

html

css

position