是否可以將此文本保存在具有絕對位置的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;*/ 
... 
}