2015-04-03 52 views
0

我最近想出瞭如何使用絕對位置垂直對齊項目,並且它工作得很好,直到我今天做了一些事情。我正在修改我的佈局,以便它能夠流暢並以不同的屏幕分辨率工作,現在該項目正在向上移動並覆蓋現有的佈局項目,遠遠超出了其包含div的範圍(是否有辦法阻止這種情況發生?)。我知道這是因爲它是「絕對定位」,我讀過它從網站的流程中移除它,但有沒有辦法將這個項目保存在它所包含的div中?它正在向上移動,因爲當屏幕縮小時,內容會被擠壓在一起,並推動所有內容。「絕對定位」項目垂直移動佈局

這讓我感到特別瘋狂,因爲我很確定在調整大小之前它已經工作得很好,而且我認爲我搞砸了一些東西並毀了它。我如何使這個絕對位置的東西行爲?

回答

0

設置項目的父元素的定位是relative。絕對定位的元素只相對於他們最近的絕對或相對定位的父親。

然而,有可能是一個更好的方式來實現你會比使用絕對定位的垂直對齊......

+0

父元素已經設置爲相對的,我不得不爲了讓它工作而戰。您是否有其他方法來垂直定位底部的東西? – 2015-04-03 22:42:22

+0

你能舉一個你想要做的例子嗎? – embden 2015-04-04 16:19:40

+0

這裏是[鏈接](http://jsfiddle.net/tcfnvtvq/),我基本上試圖做。我不明白爲什麼data2和data3不是應該浮動的,因爲它們是在我自己的代碼中執行的,但是我的主要問題是將data1(和img,如果可能的話)放在TD的底部而不使用絕對位置,因爲這兩個高度都沒有設置,並且它不斷讓我的佈局搞亂。 @embden – 2015-04-05 17:36:21

0

您可以嘗試與z-index屬性彈,但它取決於你的佈局

+0

這可能會幫助該項目在導航欄中它的阻止面前表現出來,但我想它不會突破它包含div。我不明白爲什麼它不這樣做。爲什麼整個佈局不像正常情況那樣向下移動頁面? – 2015-04-03 22:43:29

+0

絕對不會像平常一樣向下移動,發佈你的html + css,如果你想要更好的答案 – gia 2015-04-04 00:05:40

+0

謝謝,但我已經決定不讓我的項目像我想要的那樣排列在底部。這些項目沒有設置高度,所以我無法圍繞絕對位置從佈局流程中移除這一事實進行設計,似乎也沒有人會將其他想法用於垂直對齊元素底部的東西。好吧。 – 2015-04-04 14:31:27