試圖右對齊JavaScript中的彈出元素

我試圖對齊表中的標題元素中的彈出元素。最終，彈出式元素將爲我的表提供排序和過濾等功能。試圖右對齊JavaScript中的彈出元素

每默認情況下，彈出窗口贊同的離開，但我想將它們對齊到權：

enter image description here

我的CSS代碼看起來像這個：

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

I想用相對位置而不是絕對（即相對於標題項目），但我不知道如何。如果我使用絕對的，是否不會干涉其他位置設置爲絕對的父容器？

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

有誰知道如何可以做到這一點？ JQuery或Javascript很好。謝謝。

來源

2013-07-03 Oliver Watkins

是這是你在找什麼？ 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;以便擁抱父容器的權利。

來源

2013-07-03 15:09:35 michaellee

任何想法爲什麼Firefox不喜歡這個？ –

ahhh因爲FF不喜歡位置：相對於TD或TH。需要包裝在DIV中，然後才能正常工作。 –

不錯！很高興你能弄清楚。 – michaellee

假設您在包含2,3,4等單元的單元上有相對位置......您可以將right: 0;添加到上面的CSS中，並且應該將它們對齊。

來源

2013-07-03 15:06:48 Styphon

看到我的答案：爲了使它工作，你還需要在父'tr'元素上的'position：relative;':) – mrcasals

是的，我認爲他已經擁有了它。 – Styphon

只需添加這個CSS代碼：

tr.TableHeaderLabels td { 
    position: relative; 
} 

.Table .Popup { 
    right: 0; 
}

我想在你的jsfiddle和它的作品如預期:)

編輯：叉形原來的jsfiddle我的代碼：http://jsfiddle.net/p3khu/1/

來源

2013-07-03 15:07:07 mrcasals

我不得不將「position：absolute」添加到「.Table .Popup」中，讓它在他的小提琴中工作 – Letseatlunch

我在jsFiddle上試了一下，它也起作用了。叉小提琴，並提供工作鏈接 – Ian

@Letseatlunch風格已經存在 – Ian

試圖右對齊JavaScript中的彈出元素

回答

相關問題