絕對定位頁腳在相對定位容器中

我知道這個問題的版本已被問了很多很多次。我知道，因爲我想我在過去的4個小時裏幾乎讀了他們每一個人。絕對定位頁腳在相對定位容器中

我沒有見過這個答案。

我遇到的問題是這樣的：我有一個模板，但其他功能非常強大，可以非常有限地控制代碼。但是，我可以玩CSS。現在有幾個項目用在我需要的頁眉附近，就在頁腳下方。

我有一個包裝工作與我有相對位置的工作，並絕對定位包含在腳註下面我需要的項目。

這個作品非常好搭配：

.referencepositionwrapper { 
    position: relative; 
} 
.absolutepositioncontainer { 
    position: absolute; 
    bottom: -144px; 
}

但時纔會降低的項目是在高度約136像素。

這是蹭。我需要在頁腳下移動的內容是動態的。有時它是136px高，有時是36px。有時候它高300px。

目前，絕對定位的物品引用了包裝和容器的底部，所以當容器高度發生變化時，事情變得不可靠。

有沒有辦法使用包裝的底部和容器的頂部，因此兩個元素之間沒有大量的死區或重疊？

非常感謝你，任何幫助將不勝感激。

請求的上下文。

在我放棄了絕對一流的例子：

bottom:-144px;

產生相對的底部和絕對

的底部這是確定的頁腳時之間144px距離身高只有136px。這兩個元素之間有一個合理的空間，大約8px。但不同頁面的高度絕對不同。

因此，當頁腳包含更多數據時，說足以使絕對300px高，有156px的重疊。當數據較少時，說足夠高的絕對值爲36px，則存在108px的「死區」。

我想找到一種方法來定義的距離，說36px，相對的底部和絕對的頂部之間。

這樣，無論絕對多少額外的數據，相對和絕對之間只有36px。

感謝您的評論。希望這可以幫助。讓我知道你是否需要其他信息。

來源

2012-02-03 ZombieBunnies

你可以提供一個情境？我真的不明白你在問什麼...... – elclanrs 2012-02-03 04:35:47

在這種情況下，jsfiddle會很有用。 – 2012-02-03 08:21:10

試試這個：

.referencepositionwrapper { 
    position: relative; 
} 

.absolutepositioncontainer { 
    position: absolute; 
    top: 100%; 
    margin-top: 36px; /* or your custom distance between the two */ 
}

來源

2012-02-03 18:17:54 Artyom

絕對定位頁腳在相對定位容器中

回答

相關問題