绝对位置相对div？答案

【问题标题】：Absolute within position relative div?绝对位置相对div？
【发布时间】：2017-01-01 08:16:30
【问题描述】：

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

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

【问题讨论】：

感谢帮助，但是当我扩展我的网站时它似乎不起作用，它仍然没有停留在我想要的位置，也许如果我发布我的完整代码？生病更新我的帖子。
github.com/AndrewMC1994/Sherlock
github上有这个，不知道有没有用？
会检查.....
这看起来很棒，您需要为此使用@media 查询。当我尝试时，我找不到它的错误。这里有什么问题？ rawgit.com/AndrewMC1994/Sherlock/master/index.html

标签： html css position

【解决方案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>

【讨论】：