html - 是否可以将此文本保留在设置了绝对位置的 div 中？

Question

我正在创建 web map 。我有一个 div在 map 顶部，单击后最大化并显示自定义 attribute window .属性窗口显示基于 map 中其他操作的数据。属性窗口目前在顶部有 4 个按钮，它们将根据选择的按钮更改窗口的内容。

map 上的操作将向我的 Python flask Web 服务发送请求，该服务返回格式为 <ul><li></li><ul> 的数据我想在 attribute window 中显示.

我目前遇到的问题是文本超出了窗口 - 可能是因为我有 div设置为 position: absolute .但是有什么办法解决这个问题吗？

这是一个可用的 CodePen(单击顶部的 div):

https://codepen.io/anon/pen/oeJGdm

感谢您的任何建议。

Answer 1

为了保持您的结构，我建议进行一些更改，我仅包括此答案中的更改。

首先在#atributeWindow 中为.nav 留出空间。

#attributeWindow { 
padding-top: 30px; /*to accomodate nav bar*/
...
}

将导航移动到#attributeWindow 的顶部填充区域。

.nav{
top: 0;/* to place at top;*/
...
}

内容将放在 .nav 下方，因为在 #attributeWindow 中进行了填充。所以删除这个填充。

.attributeContent{
/*padding-top:30px; remove this padding.*/
...
}

最后去掉display:inline

#test1{
/*display: inline;*/
...
}