需要快速收录的请联系QQ:2303230985点击这里给我发消息
当前位置:搜123网站分类目录 » 站长资讯 » 网站运营 » 文章详细 订阅RssFeed

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

来源:互联网 浏览:89次 时间:2022-06-25
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() ;
$ ($d ropdownMenu) . css({"top" :utop+"px" ,"left" :uleft+"px"});
$(ele). parent() . append ( $d ropdownMenu) ;


最新点入

  • 全球網址提交網全球網址提交網

    全球網址提交網是全免費的網址提交目錄,收錄國內外、各行業優秀網站,為用戶提供全面的網站分類目錄網站、優秀網站參攷、友情連結交換平臺、網站推廣服務國內免費的網站提交入口(www.urlglobalsubmit.com)。

    www.urlglobalsubmit.com
  • 国际电子商务网国际电子商务网

    欢迎访问国际电子商务网,这里有各行业信息网/B2B电子商务网站,是最方便的免费网络推广平台,已成为无数商家网络营销/网络推广的首选网站!

    www.intbtb.com
  • 超级网站目录超级网站目录

    超级网站目录全人工编辑的专业分类目录网站,收录各行业优秀网站,旨在为用户提供网站分类目录检索,优秀网站参考,网站推广服务,网站页面査询,网站提交等服务!是站长喜爱的网站分类目录网站,专业的开放分类目录!

    www.superdirectorycn.com
  • 黄页88网黄页88网

    黄页88网是中国优秀的B2B电子商务网站,提供最新免费发布的企业黄页信息、供应信息,找客户、找求购尽在黄页88网b2b平台,免费发布信息首选黄页88网B2B电子商务网站!

    www.huangye88.com
  • 优雅导航优雅导航

    优雅导航--优雅导航(ndyywz.com)-创建于2020年4月13日。作为网站推广平台,致力为广大站长、网友提供优质、优雅网站链接。优雅导航免费收录高质量网站。

    www.ndyywz.com

推荐站点

  • 十二星座生肖网十二星座生肖网

    十二星座生肖网,提供星座、生肖、个性、开运方法、运势、配对、解梦以及命理分析、血型、算命、风水等星相生肖命理信息。

    www.12xzsx.com
  • 汇吃的汇吃的

    汇吃的是一个美食分享平台,是一个分享美食制作方法的地方,也有美食故事的分享,提供图文菜谱大全,享受美食的乐趣,找美食菜谱,就上汇吃的。

    www.huichide.com
  • 中国天气网中国天气网

    中国天气网官方权威发布天气预报,逐三小时天气预报,提供天气预报查询一周,天气预报15天查询,空气质量,生活指数,旅游出行,交通天气等查询服务

    www.weather.com.cn
  • 520设计网520设计网

    520设计-中国网页平面设计师交流平台,专为酷爱网页设计、界面设计的你而倾力打造。拥有设计视频教程、网页模板、设计素材、CSS3+HTML5、网页平面设计视频教程、设计师网址导航等相关内容,它将成为你设计路上的一位好伙伴!

    www.sj520.cn
  • 天极网天极网

    天极网,全球最大的中文IT门户,专注IT产品采购及应用指南,每天为广大用户提供电脑硬件,软件,数码,商情,手机,笔记本,游戏,互联网,数字家庭,教育,下载等内容,解决网友工作学习中的技术疑难,指导数字科技消费,领引时尚生活潮流.

    www.yesky.com