2012-07-13 65 views
4

我不能定位,最大寬度,和「右:0像素」來上下一心!我正在創建一個固定在我的網站右上角的div。頁面內容的最大寬度爲1000px,但標籤只遵守我的「right:0px」規則並且堅持到右側,一旦達到最大寬度則違反。還應該注意的是,默認情況下,div位於左上方並且遵循最大寬度(如果我鍵入'left:0px;',但它不遵守規則並且它會保留在左側)。CSS:固定位置,右:0像素,但不會服從最大寬度

CSS:

#content { 
margin: 0 auto; 
max-width: 1000px; } 

#div { 
width: 150px; 
position: fixed; 
right: 0px; } 

以下是我已經嘗試了一些替代方案:

  • 寬度:100%(與文本對齊:右)< ---不太對勁,我不喜歡100%的寬度,而不是150px
  • 添加代碼以將div「手動」放置在html中(不是CSS)
  • 我發現float和text-align不是af FECT固定定位

幫助是非常感謝!謝謝。

+1

你可以創建一個的jsfiddle? – cchana 2012-07-13 08:40:31

+0

是您嘗試分配最大寬度樣式的div ??,最大寬度,如果div爲空則不可見。 – tomexsans 2012-07-13 08:56:59

+0

我認爲你的內容div是空的。 – RAN 2012-07-13 08:59:11

回答

7

如果我理解正確,this is what you're after

您需要添加一個帶有絕對位置的容器,以便將內容移到右側,然後使用固定位置容器將其保留在您需要的位置。

+0

這完美無缺!謝謝!我一直在努力工作。我在24小時內得到了答案! **注意其他人在尋找相同的代碼:** 我申請了** Jayx **的代碼給我,起初它沒有工作,但我注意到他的'。內容'包含'位置:相對;'然後我添加到我的工作。 良好的經驗法則,如果你正在使用固定位置的div,則爲:0px;和一個最大寬度的網站:**內容是相對的,標記是絕對的,div是固定的。** 再次感謝您! – 2012-07-13 21:13:27

+0

爲什麼不這樣做,如果div'.marker'被放置在底部,在html中div'.content'文本下面? – PetaspeedBeaver 2016-04-13 18:42:51

0

我得到了它,沒有問題的工作在jsfiddle。您可能想要查看影響該區域的CSS。如果#內容是不是塊級元素(沒有寬度將被應用,這樣,您提供更多的代碼將是很大的幫助,所以我們確切地知道發生了什麼事,可以幫助你瞭解更多,您可能會出現問題。

+0

這個問題是不是剛開存在問題的容器粘在右上角,但堅持到#內容div的右上角 - 擴大你的小提琴窗口,看看它是如何堅持到瀏覽器窗口的右側,不是#content。 – Jayx 2012-07-13 10:00:36

0

我認爲你需要這一個:

#content { 
    margin: 0 auto; 
    max-width: 1000px; 
    height:20px; 
    background:yellow; 
    position: relative; 
} 
#div { 
    width: 150px; 
    position: absolute; 
    right: 0px; 
} 
0

位置:固定不相對於任何容器它是相對於DOM的HTML元素是你看到它在任何你做最右邊的原因到#content。

+1

和..如果你可以採取我的建議..請不要給'div'作爲任何元素的ID。 – AdityaSaxena 2012-07-13 09:13:26

+0

而不是位置:固定爲#div,將其位置設置爲**絕對**,並將其容器置於**相對位置** – AdityaSaxena 2012-07-13 09:19:21

0
#div { 
    width: 150px; 
    position: fixed; 
    right: calc(50% - 500px); /* will move the div as far as 50% of viewport 
    then move it back to 500px (that is half of max-width) */ 
} 

/* if needed, you can add media query */ 
@media (max-width: 1000px) { 
    right: 0; 
}