无法在图像上方的导航栏中获取按钮，无法在图像上方获取徽标答案

【问题标题】：Can't get buttons in the nav bar over the image, can't get logo over the image无法在图像上方的导航栏中获取按钮，无法在图像上方获取徽标
【发布时间】：2021-09-07 22:36:08
【问题描述】：

我正在尝试在类 nav-link-wrapper 和类徽标中获取三个 href 链接，这也是类 mainImage 上的徽标图像这是我的 CSS 代码，所有链接和徽标都在图像下方而不是在它在图像的顶部，左上角的链接和右上角的徽标

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 30px;
}

.left-side {
  display: flex;
}

.mainImage {
  position: relative;
  width: 100%;
  height: 60%;
}

.logo {
  position: absolute;
  top: 10px;
  right: 10px;
  position: relative;
}

.container>.nav-wrapper>.left-side>.nav-link-wrapper {
  margin-right: 20px;
  font-size: 0.9em;
  justify-content: space-around;
}

<div class="container">
  <img class="mainImage" src="https://via.placeholder.com/800" alt="Auckland, New Zealand" style="width:100%;height:60%;">

  <div class="nav-wrapper">
    <div class="left-side">
      <div class="nav-link-wrapper">
        <a href="index.html">Hlavní Stránka</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="projects.html">Naše Projekty</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="contact.html">Náš Kontakt</a>
      </div>
    </div>

    <div class="right-side">
      <div class="logo">
        <img src="https://via.placeholder.com/150" alt="investice do zahraničí" style="width: 150px;height: 150px;">
      </div>
    </div>
  </div>
</div>

【问题讨论】：

您显然正在尝试实现背景图像，但您没有采用任何标准方法来实现。请对此进行研究并尝试其中一种已建立的技术。
嘿，哥们，我的问题很清楚，但是我显然已经尝试研究了好几天，这个地方是我唯一的选择，背景图片很好地加载到页面上，我只需要开始放置上面的元素，徽标，href 按钮等，所以为了清楚起见，我没有实现背景图片的问题，问题是在图片上放置元素我的所有元素都在图片下方
@Jani - 我想你可能误解了 isherwood 的观点。虽然您确实正在在<img/> 中加载图像，但您似乎正试图将其用作背景——为此，有一个已建立和内置的background-image CSS property，这将是一种比您在这里尝试做的更容易、更惯用的方法。
请拨打tour 了解如何回复答案。不鼓励“谢谢”cmets。
如果您确实需要使用图像元素作为背景（不是理想的方法），请参阅stackoverflow.com/questions/31267425/…。

标签： html

【解决方案1】：

.container {
  position: relative;
}

.nav-wrapper {
 position: absolute;
 top: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%
}

.left-side {
  display: flex 
 }

 .nav-link-wrapper {
  padding: 10px
 }

 .right-side {
  border: 1px solid black
 }

<div class="container">
  <img class="mainImage" src="https://via.placeholder.com/800" alt="Auckland, New Zealand" style="width:100%;height:60%;">

  <div class="nav-wrapper">
    <div class="left-side">
      <div class="nav-link-wrapper">
        <a href="index.html">Hlavní Stránka</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="projects.html">Naše Projekty</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="contact.html">Náš Kontakt</a>
      </div>
    </div>

    <div class="right-side">
      <div class="logo">
        <img src="https://via.placeholder.com/150" alt="investice do zahraničí" style="width: 150px;height: 150px;">
      </div>
    </div>
  </div>
</div>

【讨论】：