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。