Html 在导航栏下显示图像

我试图在我的垂直导航栏旁边有一个图像，但它显示在它下面

我就是这样做的

正文
{
字体系列：“开放式Sans”，无衬线；
背景色：#333；
}
.元素
{
显示：内联块；
浮动：左；
}
#包装纸
{
位置：绝对位置；
身高：100%；
宽度：200px；
底部：0px；
背景色：#0F4D92；
}
导航
{
最高：50%；
利润上限：-75px；
位置：固定；
}
保险商实验室
{
列表样式类型：无；
宽度：200px；
高度：40px；
}

导航栏的包装是

位置：绝对这意味着其他元素都不会与之交互。可以尝试使用
位置：relative取而代之。
一种解决方案是为
.element
提供一个左边距，但如果您想在导航栏旁边显示某个内容（因为其绝对位置），则必须始终设置边距：

导致此问题的包装器位置。您必须将其更改为相对。您还需要更改以下内容：


##包装器{
位置：相对位置；
}
#包装纸{
浮动：左；
宽度：250px；
溢出：隐藏；
}
.元素{
浮动：对；
}
#包装纸，
.元素{
显示：内联块；
宽度：100%；
}
根据您想要实现的目标，我冒昧地更改了您的标记，并为您制作了一份工作副本。我想没有你想做的那么复杂。我希望这在某种程度上有所帮助


*{
框大小：边框框；
}
html，
身体{
保证金：0；
身高：100%；
}
身体{
字体系列：“开放式Sans”，无衬线；
背景色：#333；
}
.元素{
位置：相对位置；
身高：100%；
宽度：100%；
字号：0；
}
导航，
伊姆格瓦珀先生{
显示：内联块；
身高：100%；
}
导航{
宽度：20%；
背景色：#0F4D92；
字号：1rem；
}
导航>*{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
伊姆格瓦珀先生{
垂直对齐：顶部；
宽度：80%；
}
.imgWrapper>img{
宽度：100%；
身高：100%；
}
保险商实验室{
列表样式类型：无；
宽度：200px；
高度：40px；
}









如果您没有绝对定位导航栏，可能会容易得多。那么你也不需要浮动你的图像。如果您确实需要绝对定位，只需添加一个边距。@Pavlin更新了文章，我无法添加边距。那么将导航栏的位置更改为相对位置可能是您的最佳选择。@Pavlin如果我这样做，导航栏高度将变为0。是的，这是因为它试图占据正文的100%，如果您设置html，正文{最小高度：100%；}这是应该解决的。虽然这有时会导致一些奇怪的行为。我不能这样做，因为我想在灰色空间中间显示图像，所以我需要一个具有灰色空间大小的元素。@ nndoTug使Navar 0的高度。另一个想法是添加<代码>左边：200 px；< /c> >到BO。dy css类
.element
{
    display:inline-block;
    float:left;
    margin-left: 210px;
}