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

Source: Internet
Author: User

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
  1. 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>

  2. 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;
    }

  3. 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:

  4. 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:

  5. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.