尝试在Javascript中右对齐弹出元素

Question

我正在尝试将弹出元素与表格中的标题元素对齐。最终，弹出元素将为我的表提供排序和过滤等功能。

默认情况下，弹出框会将自己与 左 对齐，但我想将它们与 对 ：

我的CSS代码看起来像这样：

.Table .Popup {
    position:absolute;
    z-index:9999;
}

我想使用相对位置而不是绝对（即相对于标题项），但我不确定如何。如果我使用绝对值，是否会干扰位置设置为绝对值的任何其他父容器？

JSFiddle：http://jsfiddle.net/XJXuR/9/

有谁知道如何做到这一点？ JQuery或Javascript很好。 THX。

Answer 1

只需添加此CSS代码：

tr.TableHeaderLabels td {
  position: relative;
}

.Table .Popup {
    right: 0;
}

我在你的jsFiddle上尝试了它并按预期工作：）

编辑：将原始jsFiddle与我的代码分开：http://jsfiddle.net/p3khu/1/

Answer 2

这是你要找的吗？ http://jsfiddle.net/Vf2Td/

.Table .TableHeader td{
    border:1px solid red;
    margin:0;
    padding:0;
    position: relative;
}
.Table .Popup {
    position:absolute;
    z-index:9999;
    right: 0px;
}

为父div提供相对位置。然后作为孩子的弹出窗口需要一个权利：0px;这样它就拥抱了父容器的权利。

Answer 3

假设你在包含两个，三个，四个等的单元格上有相对位置......你可以在上面的css中添加right: 0;，这应该正确对齐它们。