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

Question

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

地图上的操作将向我的 Python flask Web 服务发送一个请求，其中 returns 格式为 <ul><li></li><ul> 的数据我想在 attribute window 中显示.

我目前遇到的问题是文本超出了 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;*/
...
}

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

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

最后删除 display:inline

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