CSS How to Make this Css Widget Static?

Hello guys,

I have created a simple css widget to redirect visitors to facebook,twitter,etc- check the left side) But unfortunately I don't know how to make it static like the feedback button in the same site at the right side.

Now when some one scroll the page down, this widget is also scrolling down. Can anybody help me to make it static there?

Thanks.

 

Looks fine to me, so I suppose you changed the HTML. In such cases you can make a test page and try the elements, so you don't break the live site. Here is some sample code in case someone else needs it.

1. CSS

Code:

#ltc {
  position: fixed;
  z-index: 100;
  left: 0px;
  top: 60px;
}
 
#rtc {
  position: fixed;
  z-index: 100;
  right: 0px;
  top: 130px;
}

2. HTML

Code:

<div id="ltc">
  <div>LText1</div>
  <div>LText2</div>
  <div>LText3</div>
</div>
<div id="rtc">
  <div>RText1</div>
  <div>RText2</div>
  <div>RText3</div>
</div>

The key to make the div go anywhere and stay at the top of the page is the position property with the fixed value. You can then setup the content to whatever you want.

The left/right/top/bottom properties (because of the fixed position) are offsets in the viewport of the browser. The z-index forces the elements to stay at the top for some of the browsers like IE.

 

Thanks enigma - it works now..!!