position定位與overflow影響容器內部提示框顯示問題

問題描述

因爲使用了一個滾動條美化插件；該插件使用div容器做滾動條，所以使用了position：relative相當定位與position: absolute絕對定位與overflow：hidden影響容器內部提示框顯示問題。

基礎代碼如下

<div style="max-height:500px;overflow: hidden;">
	<div style="position: relative; overflow:hidden;">
		<div style="position: relative; overflow:hidden;">
			<table class="table table-ash table-striped table-hover table-fixed">
				<tbody>
					<tr ng-repeat="data in ngTable.data" tip-repeat-done tr-active>
						<td width="4%">我們對Markdown編輯器進行了一些功能拓展與語法支持，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫博客：我們對Markdown編輯器進行了一些功能拓展與語法支持，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫博客：</td>
						<td width="40%">我們對Markdown編輯器進行了一些功能拓展與語法支持，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫博客：</td>
						<td width="10%">文字太多了；要顯示滾滾動條，原生滾動條有太醜了，這怎麼辦？？？</td>
						<td width="10%">使用插件來幫忙</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<div style="position: absolute;">
	<div style="position: absolute;">
		<div>......</div>
	</div>
</div>

顯示效果圖

解決問題方法

去掉滾動條美化插件，使用傳統的滾動條，少了兩層相對定位和絕對定位的DIV；詳細代碼如下：

<div style="max-height:500px;overflow-y:auto;">
	<table class="table table-ash table-striped table-hover table-fixed">
		<tbody>
			<tr ng-repeat="data in ngTable.data" tip-repeat-done tr-active>
				<td width="4%">我們對Markdown編輯器進行了一些功能拓展與語法支持，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫博客：我們對Markdown編輯器進行了一些功能拓展與語法支持，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫博客：</td>
				<td width="40%">我們對Markdown編輯器進行了一些功能拓展與語法支持，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫博客：</td>
				<td width="10%">文字太多了；要顯示滾滾動條，原生滾動條有太醜了，這怎麼辦？？？</td>
				<td width="10%">使用插件來幫忙</td>
			</tr>
		</tbody>
	</table>
</div>

顯示效果圖如下；

技術難點是：
1、動態數據、動態初始繪製容器，調試費勁；
2、容器相對定位與絕對定位；需要考慮其他模塊的兼容性問題。

特此記錄一下，方便遇到再次查閱；如果在遇到這種情況，首先考慮div定位問題。其次是overflow：hidden