在html中的两个div之间设置图像

我有两个div

A

和

B

。 现在我想为两个div设置一个图像，如下图所示。

HTML

<div class="navbar-slider">
   <div class="navbar"></div>
   <img src="image_src" alt="Test Image">
   <div class="slider"></div>
</div>

无法理解什么是

css

位置

有人帮忙吗？提前谢谢。

HTML

<div></div>
<img src="image_src" alt="Test Image">
<div></div>

---

只需使用绝对位置并将其Y-50%平移，它将始终垂直于其高度的一半

.navbar{背景：#ccc；高度：100px；}
.navbar滑块{位置：相对；}
img{
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
}
.slider{背景：#333；高度：100px；}

上面的
降低

.navbar滑块{
显示器：flex；
弯曲方向：立柱；
}
navbar先生{
宽度：200px；
高度：200px；
边框：1px实心；
位置：绝对位置；
转换：翻译（25%，0%）；
背景颜色：绿色；
}
img{
宽度：202px；
位置：绝对位置；
转化：翻译（25%，50%）；
边界半径：50%；
z指数：9999；
}
.滑块{
宽度：200px；
高度：200px；
边框：1px实心；
位置：绝对位置；
转换：翻译（25%，100%）；
背景颜色：黄色；
}

---

试试这个。

.navbar{高度：100px；背景色：#d37245；}
img{宽度：200px；位置：相对；}
.img{边缘：0；位置：绝对；左侧：50%；
-ms转换：翻译（-50%，-50%）；
转换：转换（-50%，-50%）；}
.slider{高度：100px；背景色：#d34545；}

您可以尝试将图像放在导航栏中，使用底部：0；然后在y轴上进行50%的翻译，但你需要尝试一些东西，否则这个问题就偏离主题了SO@Pete....will请在回答部分给出css代码？谢谢合作…只需在

img

css中添加

z-index

。这就是为什么选择谢尔盖·库兹涅佐夫的答案（很高兴我帮了你）

div{
    height: 200px;
}

img{
    height: 200px;
    position: absolute;
    top: 100px;
}