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

Question

我有一个项目，我需要在右上方对齐一个div，使其位于现有的可变宽度td之上。

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

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

jsfiddle.net/ErDr6/36/

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

Align div with fixed position on the right side

Answer 1

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

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

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

Answer 2

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

theTD.offsetLeft + theTD.offsetWidth-arrow.offsetWidth