Question

以下是我使用的CSS：

img {
    max-width: 100%;
    height: auto;    
    float: left;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

＆＃13;

    body {
      margin: 0;
    }
    img {
      max-width: 100%;
      height: auto;
      float: left;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 15%;
      background-color: #f1f1f1;
      position: fixed;
      height: 100%;
      overflow: auto;
    }
    li a {
      display: block;
      color: #000;
      padding: 8px 0 8px 16px;
      text-decoration: none;
    }
    li a.active {
      background-color: #4CAF50;
      color: white;
    }
    li a:hover:not(.active) {
      background-color: #555;
      color: white;
    }

＆＃13;

<ul class="nav">
  <li><a href="#">PAGE 1</a>
  </li>
  <li><a href="#">PAGE 2</a>
  </li>
  <li><a href="#">PAGE 3</a>
  </li>
  <li><a href="#">PAGE 4</a>
  </li>
  <li><a href="#">PAGE 5</a>
  </li>
  <li><a href="#">PAGE 6</a>
  </li>
  <li><a href="#">PAGE 7</a>
  </li>
  <li><a href="#">PAGE 8</a>
  </li>
  <li><a href="#">PAGE 9</a>
  </li>
</ul>
<img src="http://i.stack.imgur.com/71Rqx.jpg" alt="banner">
</img>

＆＃13;

所以问题是图像落在我的导航栏后面。这是原始2图片。

Answer 1

由于导航固定在左侧，因此您的图像会落后。你可以做几件事来解决这个问题。首先，你周围的div为内容形成图像并加上边距（例如下面的例子）。其次，你可以使导航绝对，所以图像不会落后于它。

HTML

<div class='content'>
  <img src="banner.jpg" alt="banner" />
</div>

CSS

.content {
  margin-left:15%;
}

为什么我的导航栏会显示在我的图片上？

1 个答案: