Position: fixed usage notes in CSS

After several years of development, I did not pay attention to the position: fixed usage during front-end development.

We all know the position value of the position attribute in CSS. Besides the default value, there are absolute, relative, and fixed. I usually use absolute and relative, but I don't pay much attention to position: fixed. It may be because the position: fixed mentioned in the CSS Chinese manual shows that "IE5.5 and NS6 do not support this attribute.

Yesterday, when I was working on a project, I needed to fix a layer relative to the browser border. At that time, I tried it with position: absolute and found that absolute is for the webpage border. Later, I checked some JavaScript statements that dynamically changed the left and top values based on the movement of the scroll bar. Although they can achieve similar results, when the scroll bar moves, the layer is shaking, and it doesn't look good. I want a way to fix the layer.

See the following code:

The code is as follows:	Copy code
<Style type = "text/css"> <! -- # Help { Width: 30px; Height: 20px; Background-color: green; Position: fixed; Left: 60px; Top: 100px; } --> </Style>

We use the above code to define a layer "help" (id = "help") on the page "). In this way, we can achieve the desired effect.

In IE 8, Firefox, Opera, Google and other browsers, there is no problem, but in earlier versions of IE, this attribute is invalid.