Html 将div放在图像下方

我正在开发一个布局，希望在用户单击照片时创建一个选项列表。这就像打开一个气球（div），气球内有一些选项，例如，我的帐户、注销

我看到的一个例子就是这个模板

我的问题不是使用javascript打开这个div，而是定位。如何创建一个div以保持在该位置

.topnav{
溢出：隐藏；
背景色：rgb（255、255、255）；
盒影：0 1px 1px 0 rgba（0,0,0,0.2）；
z指数：10；
位置：相对位置；
}
.topnav a{
浮动：左；
显示：块；
颜色：#4e4e；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
单性瓢虫{
背景色：rgb（255、255、255）；
颜色：rgb（0,0,0）；
}
.topnav.icon{
显示：无；
}

西斯特马
家

您似乎正在寻找绝对定位元素。我添加了一个带有绝对位置的红色Div和一些Jquery来切换Div。您可能需要在这个Div上进行更多的样式设置，以实现精确的样式

$（文档）.ready（函数（）{
$（“#openRedDiv”）。单击（函数（）{
$（“#redDiv”）.slideToggle（）；
})
})

.topnav{
背景色：rgb（255、255、255）；
盒影：0 1px 1px 0 rgba（0,0,0,0.2）；
z指数：10；
位置：相对位置；
}
.topnav a{
浮动：左；
显示：块；
颜色：#4e4e；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
单性瓢虫{
背景色：rgb（255、255、255）；
颜色：rgb（0,0,0）；
}
.topnav.icon{
显示：无；
}
#雷迪夫{
位置：绝对位置；
顶部：55px；
右：0px；
宽度：150px；
高度：80px；
背景：#ff0000；
}

西斯特马
家

当绝对div离开父导航时，不要忘记删除

溢出：隐藏

@埃米里米雷拉