讓對象堅持頁面的右上方

我在我的項目中添加了着名的「在Github上分叉我」功能區。標籤是這樣的：讓對象堅持頁面的右上方

<a href="https://github.com/Nurdok/htmlify"> 
    <img style="position: absolute; top: 0; right: 0; border: 0;" 
    src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" 
    alt="Fork me on GitHub"> 
</a>

它看起來很棒，但一些div這在我的網頁中有最小長度，所以當窗口較小，一個有水平滾動屏幕。當發生這種情況時，我希望「在Github上分叉我」鏈接可以堅持到窗口的右上方，而不是窗口。這是它的外觀現在：

滾動一路左：
enter image description here

滾動一路向右：
enter image description here

看來，色帶放在初始窗口的右上角，並保持靜態。我想要的是它在第一種情況下不可見，在第二種情況下從右上角（當我向右滾動時）。

編輯：感謝您的快速回答，人。但是，大多數答案使得功能區水平和垂直滾動頁面。我想要的是將其固定在頁面的右上角（而不是瀏覽器視圖），並且只有在滾動到其位置所在的位置時才能看到。

來源

2013-05-17 Amir Rachum

它是您網頁正文中的第一個元素，還是它是另一個元素的子元素？ – j08691

這是一個孩子，但無論答案如何，它都可以。 –

@AmirRachum，我的答案應該做的伎倆，但是被低估了，我不知道爲什麼:) – Wiktor

你可以做一個小動作，把你的形象成最小寬度的div。

<div style="position:relative;min-width:960px"> 
<img src="..." style="position: absolute;right:0;top:0" /> 
</div>

並將該div放在<body>開頭部分。

position:relative使得具有position:absolute的那個元素的所有孩子都被絕對定位，根據表示 div，而不是整個頁面。當視口大於min-width時，div與視口寬度相同。當視口較小時，div將具有最小寬度並且圖像停留在div的角落處。

來源

2013-05-17 14:05:16 Wiktor

通過適當選擇「最小寬度」值，解決了我的問題。我不知道爲什麼它是downvoted。 –

它也解決了我的問題..只是想讓它透明的div –

兩種替代

堅持視口：要堅持到視你應該定位您的元素「固定」而不是「絕對」

<img style="position: fixed; top: 0; right: 0; border: 0;"

貼在容器上：如果你希望它被粘到容器（這樣妍沒有看到它時，你瀏覽左）用絕對的，而是做容器的位置是：相對所以它包含塊的目標是

如果你不想在左側滾動時看到圖像然後使用這個容器的明確寬度我在說這裏是一個JSFiddle的例子。

我用平方div而不是圖像。 CSS代碼如下：

#container { 
    width: 700px; 
    height: 700px; 
    background: #55ff90; 
    position: relative; 
} 

#image { 
    width: 70px; 
    height: 60px; 
    background: #ffff90; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
}

來源

2013-05-17 14:01:11 Fico

然後，如果有人滾動垂直它將始終可見。 – j08691

@ j08691Sure！當然。 – Fico

@Fico請參閱我的編輯。 –

更改position: absolute;至position: fixed。

至於側面說明，把款式上a而不是圖像，並添加一些z-index，以確保它停留在一切之上：

<a href="https://github.com/Nurdok/htmlify" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;"> 
    <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" 
    alt="Fork me on GitHub"> 
</a>

來源

2013-05-17 14:02:21 RaphaelDDL

注意到'position：fixed'在手機上的工作方式有點不同，因爲它的工作方式 - 在釋放手指後，您實際上會看到圖像「跳躍」，而不是在正常網頁上滾動時移動。 – hexblot

@hexblot得注意，'固定'只適用於iOS 5+，並且像你說的那樣是越野車。滾動時我保持閃爍。只有在iOS6 +上，Apple固定「固定」才能在滾動時更流暢。 – RaphaelDDL

對於'z-index'提示+1結合已接受的解決方案，它解決了我的問題。謝謝！ –

如果它應該只保留在水平滾動條的右上角，那麼您無法使用基本的CSS來完成此操作。您的要求堅持水平滾動的右上角，而不是垂直滾動。要求的第一部分可以使用position: fixed;完成，雖然這打破了第二部分。

如何使用相對浮動始終堅持網站的右上角：Fiddle

<div id='container'> 
    <div id='sticky'>x</div> 
</div> 

#sticky { 
    width: 100px; 
    height: 100px; 
    background: red; 
    float: right; 
} 

#container { 
    width: 100%; 
    height: 200px; 
    background: blue; 
}

來源

2013-05-17 14:13:48 Aquillo

我希望它堅持到右上方並保持原位。除非我能看到頁面的右上角，否則我不應該看到它。 –

如果你按照小提琴演奏，你會發現它總是粘在你網站的右上角，這是你的要求嗎？ – Aquillo

它粘在瀏覽器窗口的右上角，而不是頁面。 –

你應該使用float:right，調整margin如果你需要，例如：margin-right: 5px。乾杯:)

來源

2013-05-17 14:20:43 konnigun

如果我理解你想要的東西正確，你希望圖像粘到窗口的頂部角落，直到窗口達到一定的大小（水平）然後粘住。

如果是這樣，這裏是一個可能的解決辦法：

body{ 
    min-width:1000px; /* or whatever you need it to be */ 
} 

#ribbon{ 
    position:relative; 
    float:right; 
}

DEMO FIDDLE

DEMO FULLSCREEN

你也可以使用一個div容器與min-width，你的選擇。

來源

2013-05-17 14:36:52

讓對象堅持頁面的右上方

回答

相關問題