如何擺脫與位置的差距：相對橫幅

什麼是建議&最優雅的方式擺脫位置造成的差距：相對？如何擺脫與位置的差距：相對橫幅

我有一個頭版，並希望把一條橫幅，將部分上面的標題和內容部分，但使用的位置是：相對於產生的空白區域...

見例如（我想要的文字要略低於紅色框）：

http://jsfiddle.net/Ru2CT/

我知道我可以創造定位的div爲我的文字的父另一個親戚，但我仍然有差距，但內容部分&頁腳間...

任何想法？ :)

來源

2011-04-16 Wordpressor

，我終於解決了這個問題，簡單的：

position: relative; 
    bottom: 200px; 
    margin-bottom: -200px;

是否神奇！ :)

來源

2011-05-13 18:12:56 Wordpressor

取灰色框的全部內容，並將其放在一個div（拉伸爲相同的大小）。然後把這個盒子放在相對位置上。這將具有用紅色「滑塊」/橫幅標記移動文本而不移動灰色背景的效果。

這裏，我們去： http://jsfiddle.net/4BLFJ/ [動畫和註釋]

來源

2011-04-16 20:49:42 ninjagecko

對於那些無法理解的人來說，要獲得額外的炫目可視化效果，這裏有一個動畫：http://jsfiddle.net/JmSAX/ – ninjagecko 2011-04-16 21:00:15

任何其他想法？這仍然存在差距。之間的虛線div和頁腳：http://jsfiddle.net/JmSAX/1/ – Wordpressor 2011-04-17 20:29:38

當然，我已經添加了另一種可能的解決方案 – ninjagecko 2011-04-18 18:22:38

這不是你問什麼，但就是這兩種方式我會做一個：

這裏的主要思想是使橫幅一個絕對定位的div（並非絕對位於頁面上，儘管您也可以這樣做;實際上它可能會更好）。

首先將#content區域設置爲position：relative，但不會更改其他任何內容。這會創建一個新的堆棧上下文（子元素使用top/right/bottom/left和相對於它的百分比）。

然後把條幅強檔＃內容區的子元素，並將其設置如下：

position:absolute; 
width:80%; height:100px; /*there are other ways to set the height and width*/ 
bottom:100%; /*this puts it at the top*/ 
/*you can also use bottom:105% or bottom:90% or other things, or if you really 
    want to use non-relative units like px, you can create a third nested div that is 
    relatively positioned by whatever px amount*/

來源

2011-04-18 18:22:20 ninjagecko

負利潤率將在此情況下（revised jsFiddle）一個更好的解決方案。請注意，我必須將#eee背景移動到div＃main，否則會覆蓋div＃top的背景。

作爲一般的經驗法則，我還建議避免相對定位，除非絕對必要 - 通常會導致舊版本IE中的z-index頭痛。

來源

2011-04-18 22:38:17 CVM

如何擺脫與位置的差距：相對橫幅

回答

相關問題