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

Question

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

默认情况下，弹出窗口向左对齐，但我想将它们向右对齐：

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

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

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

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

有谁知道如何做到这一点？JQuery 或 Javascript 都可以。谢谢。

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

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