是否可以将此文本保存在具有绝对位置的div中？

Question

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

地图上的操作会向我的Python烧瓶网络服务发送请求，该请求返回格式为<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*/ 
... 
} 

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

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

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

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

最后删除显示：内联

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