Html 为什么我的导航栏出现在我的图像上方？

以下是我正在使用的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;
}

正文{
保证金：0；
}
img{
最大宽度：100%；
高度：自动；
浮动：左；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
宽度：15%；
背景色：#f1f1；
位置：固定；
身高：100%；
溢出：自动；
}
李阿{
显示：块；
颜色：#000；
填充：8px 0 8px 16px；
文字装饰：无；
}
李安：很活跃{
背景色：#4CAF50；
颜色：白色；
}
li a:悬停：未（.active）{
背景色：#555；
颜色：白色；
}

由于导航固定在左侧，因此图像会落后。你可以做一些事情来解决这个问题。首先在图像周围画一个div作为内容，并在其上留一个边距（如下示例）。其次，你可以使导航绝对，这样图像就不会落在它后面

HTML

---

谢谢，现在一切都好了。

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

.content {
  margin-left:15%;
}