CSS選項卡小部件文本

Question

我在this page和其他許多人（例如UserVoice）上看到了「反饋選項卡」。我想在我的網站上使用類似的東西，但在我的情況下，該選項卡將不可點擊。該選項卡的唯一目的是始終以不顯眼的方式將網站名稱保持在屏幕上。

有沒有人知道任何好的資源，這些資源可以解釋製作其滾動行爲和定位與此類似的小部件所必需的CSS。

更新

我知道我需要使用固定的位置，但我掙扎的部分是如何改變文字的方向。理想情況下，我希望能夠在HTML中指定文本，而不是使用圖像。

我試圖反向工程的小部件是如何在頁面上創建上面，我發現，如果你禁用財產

background-image:url(http://getsatisfaction.com/images/feedback_trans_tab.png); 

的文本消失。我認爲「反饋」文字是feedback_trans_tab.png圖像的一部分，但它不是！ 任何人都可以解釋「反饋」文本是如何生成和定位的嗎？

謝謝， 唐

Answer 1

這很簡單。首先，創建一個<div>與您的圖像，文本，或任何其中。請確保您定義的id屬性爲您的div：

<div id="my_div">The Text</div> 

然後，以保持它在的地方，這裏的CSS你可以使用：

#my_div { 
    position: fixed; 
    top: 50px; 
    right: 0px; 
} 

這將使你的DIV在右手的大小從頂部向下約50像素。

Answer 2

CSS3支持使用writing-mode屬性旋轉文本：

writing-mode:tb-rl; 

More here

IE也提供了一些過濾器，做相同的預CSS3。