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