(go) Instance position the fixed property of the CSS in the use

About the fixed property, under what circumstances to use, how to use, first of all, we should understand the following fixed property Description: Fixed always the body as the object when positioning, always based on the browser window to the element positioning, through the "left", "Top", "right", " Bottom "property to locate.

So, once we understand the description of the fixed property, we can see what it does. When we need to make a layer automatically adjust the position of the layer relative to the browser, if you use position's absolute property to locate the layer, you will find that the absolute property does not reach the CSS effect you want. At this point, you need to use the fixed property to locate the layer, of course, if you do not want to use the fixed attribute, you can use JavaScript statements instead. Let's take a look at the example below:

Tools/Materials

• Dreamweaver 8

• ? IE8 Browser

Method/Step

2. We add 2 layers to the code: DIV1 and Div2, with the following code:

   <div class= "Div1" > Layer 1</div>
   <div class= "Div2" > Layer 2</div>

4. To write the corresponding CSS code, let's try without the fixed attribute:

   . div1{
   
   width:100px;
   height:100px;
   }

   . div2{
   Background-color: #33FF66;
   width:100px;
   height:100px;
   }

6. Then we F12 run a look at the effect, I am using the Dreamweaver 8, you can also directly in the Notepad test code, Figure 1 is the effect without the fixed attribute:

8. Below we add the fixed attribute, in order to make it easy for us to observe, we make the layer div1 wide and high enough, CSS code is as follows:

   . div1{
   
   width:2000px;
   height:2000px;
   }

   . div2{
   Background-color: #33FF66;
   width:100px;
   height:100px;
   position:fixed;
   left:50px;
   top:50px;
   }

   Run to see the effect, 2:

10. Below we pull the browser up and down scroll bar and left and right scroll bar, all pull to the middle position, 3:

    You will find that, given the DIV2 position plus the fixed attribute, no matter how we pull the browser scroll bar, layer 2 in the browser position will not change, is not feeling the feeling of eager, then quickly hands-on experiment it.

(go) Instance position the fixed property of the CSS in the use