是否可以将此文本保留在具有绝对位置的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*/
...
}

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

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

自#attributeWindow填充后，内容将放在.nav下面。所以删除这个填充。

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

最后删除display：inline

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