CSS2 Sticky-Text Demo
Description:
If your browser supports Fixed positioned divisions, you will see a yellow box in the lower right portion of this screen. As you scroll up or down, the box remains visible. In pre-IE7 browsers, the yellow box is not visible until you scroll down to the end of this page.
Method:
CSS Code
#Sticky {
color:#FF0000;
background: #FFCC00;
position:fixed; /** not supported in pre-IE7 browsers **/
bottom:2px;
right:2px;
padding: 0 10px 0 10px;
/** for pre-IE7 browsers only**/
_position:absolute;
bottom:2px;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}
Html Code
<div id="Sticky">
<p>Here is some sticky text.</p>
</div>
Related Links:
- Photoshop Tutorial - Making a White Box with Contoured Edges
- CSS2 - Bringing Image Slices into a CSS Layout
- CSS2 - Centered Page - Fixed Width
- CSS2 - Centered Page - Liquid Layout
- CSS2 - Captions on Floated Images
- CSS2 - Sticky-Text Demo
- CSS3 - Rounded Corners Demo