Javascript 为什么绝对定位忽略顶部填充而不是左侧填充？

所以我试图让涟漪出现在你点击的地方，但它似乎把它放在右边，不管左边填充的像素有多少。有人知道为什么吗

此外，如果有人知道一些好方法，一旦不再使用div，就可以移除div：）

var links=document.getElementsByTagName（'button'）；
函数波纹（e）{
var rpl=document.createElement（'div'）；
这是一个附加子对象（rpl）；
var d=Math.max（this.clientWidth，this.clientHeight）；
rpl.style.width=rpl.style.height=d+“px”；
pl=window.getComputedStyle（this，null）.getPropertyValue（'padding-left'）；
rpl.style.left=e.clientX-this.offsetLeft-d/2+“px”；
rpl.style.top=e.clientY-this.offsetTop-d/2+“px”；
rpl.classList.add（'ripple'）；
}
Array.prototype.forEach.call（链接，函数（b）{
b、 addEventListener（“点击”，波纹）；
});
/*自定义字体-蒙特塞拉特苦味*/
@导入url（'http://fonts.googleapis.com/css?family=Montserrat|"苦",；
/*基本重置*/
*{边距：0；填充：0；字体系列：arial；框大小：边框框}
身体{
背景:#212121 ;；
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
h1{
文本对齐：居中；填充：85px 100px；
颜色：白烟；
宽度：100%；
利润率：20px；
}
.green{背景：石灰；边框：3px固体石灰；}
.blue{背景：dodgerblue；边框：3px实心dodgerblue；}
.orange{背景：橙色；边框：3px实心橙色；}
钮扣{
最小宽度：100px；
利润率：1%；
位置：相对位置；
用户文本选择：无；
边界半径：4px；
字体系列：arial；
字号：18px；
光标：指针；
大纲：无；
颜色：#212121；
溢出：隐藏；
填充：18px 30px；
}
.涟漪{
位置：绝对位置；
背景:#f5；
高度：50px；
宽度：50px；
边界半径：50%；
不透明度：0.5；
z指数：3；
变换：比例（0）；不透明度：0.9；
动画：线性；
}
@关键帧波纹{
到{变换：比例（2.5）；不透明度：0；}
}
涟漪点击效应
登录
注册
订阅时事通讯
是的，当您仅定义最小宽度/最小高度而没有宽度/高度属性时，chrome会出现一些问题。尝试设置按钮的宽度：150px，你会发现问题消失了。但如果您想保持宽度：自动，您可以尝试委派您的点击事件，并获得所有尺寸、鼠标坐标等，如下所示：

p、 我还为
.ripple
添加了
指针事件：none
（IE11+），这样就可以在上一个
.ripple
对象上触发下一个单击事件。您可以删除它并检查差异

p、 s.2删除以前的
.ripple
元素，您可以使用onanimationend事件（IE10+）


var links=document.getElementsByTagName（'button'）；
window.addEventListener（'click'，function（）{
var wX=event.clientX；
var wY=event.clientY；
if（event.target.nodeName==“按钮”）{
var按钮=event.target；
var getButtonPos=event.target.getBoundingClientRect（）；
var bX=getButtonPos.left；
var bY=getButtonPos.top；
var rpl=document.createElement（'div'）；
rpl.addEventListener（'animationend'，function（）{
this.parentElement.removeChild（this）；
});
按钮。追加子项（rpl）；
var d=Math.max（button.clientWidth，button.clientHeight）；
rpl.style.width=rpl.style.height=d+“px”；
rpl.style.left=wX-bX-d/2+“px”；
rpl.style.top=wY-bY-d/2+“px”；
rpl.classList.add（'ripple'）；
}
});
/*自定义字体-蒙特塞拉特苦味*/
@导入url（'http://fonts.googleapis.com/css?family=Montserrat|"苦",；
/*基本重置*/
*{边距：0；填充：0；字体系列：arial；框大小：边框框}
身体{
背景:#212121 ;；
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
h1{
文本对齐：居中；填充：85px 100px；
颜色：白烟；
宽度：100%；
利润率：20px；
}
.green{背景：石灰；边框：3px固体石灰；}
.blue{背景：dodgerblue；边框：3px实心dodgerblue；}
.orange{背景：橙色；边框：3px实心橙色；}
钮扣{
最小宽度：100px；
利润率：1%；
位置：相对位置；
用户文本选择：无；
边界半径：4px；
字体系列：arial；
字号：18px；
光标：指针；
大纲：无；
颜色：#212121；
溢出：隐藏；
填充：18px 30px；
}
.涟漪{
位置：绝对位置；
背景:#f5；
高度：50px；
宽度：50px；
边界半径：50%；
不透明度：0.5；
z指数：3；
变换：比例（0）；不透明度：0.9；
动画：线性；
指针事件：无；
}
@关键帧波纹{
到{变换：比例（2.5）；不透明度：0；}
}
涟漪点击效应
登录
注册
订阅时事通讯