Position为absolute的div或dropdown menu在设置了overflow的div中显示不完全(cropped)

Three methods to solve: 三种方法

1. 假设你要将div4(absolute postion) 根据div3定位，但是显示区域会超过div1。而div1却有overflow，若没有div2，那么div4会显示不完全。

解决方案：在有overflow的div1和定位参考的div3之间，多加一层div2，使其position为absolute。但注意的是，这时div1不能有position:relative，否则div4还是会显示不完全。为了让div2显示的位置正确，可通过设置div1的padding属性来调整。

#div1 { overflow: hidden }
#div2 { position: absolute }
#div3 { position: relative }
#div4 { position: absolute }

<div id="div1">
<div id="div2">
<div id="div3">	
<div id="div4"/>
</div>
</div>
</div>

2. 若需要absolute定位的div是根据有overflow的那个div来定位的，如下面的div2和div1，那么div2也会被cropped。

#div1 { overflow: auto; position:relative;}
#div2 { position: absolute }

<div id="div1">
<div id="div2"/>
</div>

解决方案：在有overflow的div外加一层div，使其大小根据div1变化，但是将relative position换到这个多加的div中，使div2直接根据div1-wrap定位，这样就不会被cropped了。

#div1-wrap {position:relative; height:auto; width:auto;}
#div1 { overflow: auto}
#div2 { position: absolute}

<div id="div1-wrap">
<div id="div1">
<div id="div2"/>
</div>
</div>

3. 最后一种方法我个人觉得是比较稳妥的（因为发现前两种方法在滚动div内不会随着滚动），也就是当需要该div出现时，用js实时定位其所在的位置。

像在下面的代码里，我有一个可滚动的列表，列表里有多个行（可动态添加和删除），每行内有个图标，点击该图标会出现一个紧挨着它的下拉菜单。之前用了方法1，后发现在列表末端（即需要滚动才能看得到的）行的下拉菜单会显示到很下面，且不会随着列表滚动而滚动。这里，$(ele)为图标元素，当点击该图标后，js实施获取其元素位置，然后根据该位置来定位下拉菜单的位置。

不过需要注意的是，获取元素位置有两种方式。一种是offset()，它获取的是元素在视窗内的位置，与页面内其他元素无关。例如offset().top获取的就是该元素到你浏览器显示范围的顶端的距离，注意，不是到页面顶端的距离。所以说当你的整个页面有滚动时，即使该元素在整个页面中的位置不变时，返回的值也会不同。另一种是position()，它返回的是相对父元素（有position:relative）的位置。在下面的例子当中，我将最顶层的整个大页面设置了position:relative，这样获取到的图标位置就是相对整个页面内的位置了。由于在最顶层页面和下拉菜单之间不存在别的position:relative的元素，下拉菜单也是相对这个最顶层页面定位的。因此可以正确定位，且不会被cropped。

var itop = $(ele).position().top;
var ileft = $(ele).position().left;
var utop = itop + 20;
var uleft = ileft - 115;
var $dropdownMenu = addTeamDropdownMenu();
$($dropdownMenu).css({"top":utop+"px","left":uleft+"px"});
$(ele).parent().append($dropdownMenu);