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);

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

position属性absolute与relative 详解不为人知的（fixed）绝对定位(fixed相对于浏览器窗口=不动的div)
From:http://www.cnblogs.com/wiseblog/articles/4352007.html Top,Right,Bottom,Left(下称TRBL,TRBL可以折分使用.) ...
CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
CSS里面position：relative与position：absolute 区别
position:absolute这个是绝对定位: 是相对于浏览器的定位. 比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离 ...
CSS position属性absolute relative等五个值的解释
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...
CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
position：absolute与position：relative的区别
absolute意思为绝对的,relative意为相对的.然而其用法与我们平常所想的有所不同. 大多数人可能会觉得absolute绝对定位是根据浏览器窗口定位,实则不是.absolute定位是相对于父 ...
如何把组件放到左上角或者右上角（position：absolute的使用）
新手容易遇到的问题: 当想要一个组件后者图片之类的东西放到页面的左上角或者右上角时可以使用 position:absolute: top:0px: left:0px: (这个是右上角的,如果是左上角就 ...
html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
[css] 说说position的absolute和fixed共同与不同点分别是什么？
[css] 说说position的absolute和fixed共同与不同点分别是什么? 相同点: 1.都是用来给元素定位的属性,具有定位元素的一切特点(例如脱离文本流.不占据空间等等): 2.改变元素 ...

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

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

最新文章

热门文章