CSS：如果将导航器放置在图像中，如何使其正常工作

Question

我是CSS新手，需要一些帮助。我需要显示标题图片，并且在图片的右下角有一个下拉菜单导航菜单。我继续创建了导航，并使用负边距对其进行了定位，使其显示在背景图像的底部。导航中的悬停效果显然不起作用。这与它在图像内部有关。那么，如果导航仪位于图像中，如何使它起作用？还是有更好的方法在图像的右下角显示导航？谢谢您的帮助！

这里是代码：

.img {
  background-image: url("https://raw.githubusercontent.com/bfoley-teamug/misc_images/master/section_header_ip.png");
  min-height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.container {
  float: right;
  margin: -40px 0;
}

#topnav {
  overflow: hidden;
  background: transparent;
  font-weight: 600;
  text-transform: uppercase;
}

#topnav a {
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

#topnav a:hover {
  background-color: #ddd;
  color: red;
  cursor: pointer;
}

<div class="img">
</div>
<div class="container">
  <div id="topnav">
    <a href="#">Home</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
  </div>
</div>

Answer 1

1. 使用position:relative;为主div，position:absolute;为主容器。
2. 使用bottom:0;至container；

fiddle进行播放。

.img {
  background-image: url("http://placekitten.com/301/301");
  min-height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.container {
  border: 1px solid red;
  position: absolute;
  bottom: 0;
  width: 100%;
}

#topnav {
  display: flex;
  justify-content: flex-end;
  background: transparent;
  font-weight: 600;
  text-transform: uppercase;
  height: 50px;
}

#topnav a {
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

#topnav a:hover {
  background-color: #ddd;
  color: red;
  cursor: pointer;
}

<div class="img">
  <div class="container">
    <div id="topnav">
      <a href="#">Home</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
    </div>
  </div>
</div>