html离父元素的距离,js获取元素到父元素的距离以及窗口offsetTop的距离

132533387.png

前言

ba2a3fe4f1de381b5d1e67343a2b579f.png

我相信在许多项目(PC端,单击移动端)中需求会很小,将鼠标移至菜单或某个位置,将显示一个弹出框,然后弹出将其移出时,该框将被隐藏,位于css中。悬停效果,这种常见做法是在每个子菜单下都有一个弹出框。父元素相对于子元素定位,子元素绝对定位。您只需要控制弹出框的显示和隐藏。但是,当鼠标移动到菜单边框时,上载时,弹出框可能会超出,如下图所示:

20171012102728444_635x128.png

bV78qV?w=666&h=413

bf1ff1288b96f3356393e3a9ec8f5200.png

该解决方案从,并且项目符号框架的位置超出了范围从边界需要动态更改。下面是offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop

resize,m_lfit,w_500

的说明

bV78AZ?w=609&h=602

请注意,弹出框的布局受到限制。尽管弹出框需要隐藏,但无法使用display隐藏:无。您可以使用不透明度0或可见性:隐藏来隐藏元素,因为显示:无法获得元素的高度,宽度等。下面是我写的一个演示

以上代码测试可以解决框溢出的问题。如果您有更好的解决方案,请指出,谢谢! ! !

本文来自电脑杂谈,转载请注明本文网址:

http://www.pc-fly.com/a/bofangqi/article-325202-1.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值