通过javascript将绝对定位的子对象与父对象居中，无需定位

所以我的处境有点棘手。基本上我有一个可滚动的水平导航，它有一个overflow-x:auto。导航具有与悬停上显示的下拉列表的链接

溢出防止下拉列表在未将其位置设置为绝对位置的情况下出现。需要注意的是，我不能再将下拉列表与链接容器对齐。当使用触控板并在导航链接上水平滚动时，这一点更为明显。下拉列表将不对齐。通过javascript将下拉列表水平锚定在其父级内联位置的方法是什么？我不反对使用jQuery

我的第一次尝试是取父对象的一半宽度，将其作为左边距，并应用50%的左定位。由于未定位，它将自动以全局父对象为中心

$'.nav链接容器'.eachfunction{ $this.find'.dropdown'.css{ 左：50%， 边缘左侧：-this.offsetWidth/2， } } 导航{ 边框：1px纯黑； 宽度：200px； 溢出-x：自动； 填充：10px； 空白：nowrap； } .nav链接容器{ 显示：内联块； 右边距：10px； } .nav链接容器：类型的最后一个{ 右边距：0； } .nav链接容器：悬停。下拉列表{ 显示：块； } .下拉列表{ 位置：绝对位置； 显示：无； 背景色：fff； 边框：1px纯绿色； 填充：10px； } 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4

---

为此，您需要使用JS jQuery。当链接悬停时，使用事件处理程序显示/隐藏下拉列表

在函数中的处理程序中，获取与文档相关的.nav链接容器的顶部和左侧。使用该值和.nav链接容器的高度设置相关.dropdown的偏移量，并显示该下拉列表

在处理程序输出中，重置下拉列表的偏移量并将其隐藏

您可以添加事件处理程序，以在导航滚动时更新偏移量

变量$nav=$'nav' 函数setDropdownOffset$link，$dropdown{ var offset=$link.offset return$dropdown.offset{ 顶部：offset.top+$link.height， 左：offset.left } } $'.nav链接容器'.eachfunction{ var$this=$this var$dropdown=$this.find'.dropdown' $this.hover函数{ var offset=$this.offset $nav.在“滚动”功能上{ setDropdownOffset$this$dropdown } setDropdownOffset$this$dropdown 显示 }, 作用{ $nav.关闭“滚动” $下拉列表 .抵消{ 排名：0， 左：0 } 隐藏 } } 导航{ 边框：1px纯黑； 宽度：200px； 溢出-x：自动； 填充：10px； 空白：nowrap； } .nav链接容器{ 显示：内联块； 右边距：10px； } .nav链接容器：类型的最后一个{ 右边距：0； } .下拉列表{ 位置：绝对位置； 显示：无； 背景色：fff； 边框：1px纯绿色； 填充：10px； } 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4 下拉链接1 下拉链接2 下拉链接3 下拉链接4

---

鉴于下拉列表的位置取决于容器的滚动量，您将无法在页面加载上应用静态位置。您需要使用悬停时的偏移量或类似的东西来确定正确的位置。有没有办法让下拉列表在水平滚动时保持固定在父对象上？如果您使用类似于轨迹板的东西滚动，您会注意到它。@CarlEdwards您可以在容器的滚动事件上应用重新定位代码。