Question

我的导航栏在移动时似乎妨碍了我的徽标，它只是爬过它。如何让它不干扰图像？它只是包围它。

＆＃13;

.drp {
  position: fixed;
  bottom: 0%;
  width: 100%
}
.lg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  margin-top: -250px;
  margin-left: -250px;
}

＆＃13;

<div class="lg">
  <img src="12.png" width="100%" />
</div>
</div>
<body>
<div class="drp">
  <nav>
    <ul>
      <a href="#">
        <li>link</li>
      </a>
      <a href="#">
        <li>link</li>
      </a>
      <a href="#">
        <li>link</li>
      </a>
      <a href="#">
        <li>link</li>
      </a>
    </ul>
  </nav>
 </body>
</div>

＆＃13;

Answer 1

问题是由position: absolute和position: fixed lg和drp类引起的，这使得它们不在正常的文档流中。

我有一个针对您当前代码的CSS hack。您的代码正常工作，直到浏览器宽度减少到600px。因此，尝试在媒体查询中修改CSS，同时提供类position: relative并相应调整lg的位置。

@media (max-width: 600px) {
  .lg {
    left: 0;
    margin: 0;
    position: relative;
    top: 20%;
    margin-top: 30px; /* top seems to not work sometimes when resizing, fiddle with the margin values */
  }

  .drp {
    position: relative;
  }
}

修改后的屏幕截图：

Navbar妨碍了Image

1 个答案: