将固定 div 对齐到可变宽度 TD 的右上角答案

【问题标题】：Align fixed div to top right of variable width TD将固定 div 对齐到可变宽度 TD 的右上角
【发布时间】：2012-01-05 05:04:22
【问题描述】：

我有一个项目，我需要将 div 右上对齐，以便它位于现有的可变宽度 td 之上。

让我难过的是可变宽度方面。通过对 div 使用固定定位，我可以让 div 位于现有相对定位的 td 之上。但是，由于 TD 宽度可以更改，我无法为 div 设置“left:”值。

我创建了一个小提琴来演示它在 td 中左对齐，现在我只需要让它右对齐：

jsfiddle.net/ErDr6/36/

我看过其他一些帖子，但它们似乎处理固定宽度的元素：

【问题讨论】：

【解决方案1】：

首先，将position: fixed; 更改为position: absolute;，这样当页面滚动时，箭头就不会相对于视口保持固定。然后，添加以下内容：

#col_arrow {
    right: 0;
}
.wc-day-column-header {
    position: relative;
}

这将使箭头与其父级的右侧对齐。我们将position: relative; 添加到父容器以将其限制在该容器中。

【讨论】：

糟糕，是的 position: absolute 更有意义。谢谢。不幸的是，当我添加 right:0;它将箭头对齐到视口的右侧而不是 td 的右侧：jsfiddle.net/TYGs9/1
有趣。那是用什么浏览器？ Mac firefox 和 safari 都在视口的最右侧为我显示箭头。
Chrome，与 Safari 使用的 webkit 引擎相同。你用这个小提琴得到什么？ jsfiddle.net/sl1dr/4GC6d
这非常非常奇怪。我无法解释这种行为，因为 CSS 是正确的。一定有别的事情在玩。对我来说效果很好也很奇怪。
您不能在 Firefox 的表格单元格中使用 position:absolute（所以毫无疑问其他浏览器）。您需要使用 position:relative 分配一个 div，然后将绝对 div 放在其中 -> jsfiddle.net/TYGs9/2

【解决方案2】：

如果需要动态，那么绝对位置可以计算为：

TD.offsetLeft+TD.offsetWidth-arrow.offsetWidth

【讨论】：

那么，用 jquery 语句代替 css 吗？
是的。根据小提琴它看起来像你用鼠标悬停移动箭头。所以一个箭头可以在鼠标悬停时重新定位，而不是必须对每个单元格应用样式。
好吧，也许这就是我应该走的路。一直希望找出 CSS 方法来改进我的 CSS 印章 :) 但我绝对可以在 jquery 中做到。据我所知，我必须以这种方式设置高度，这样才有意义。