#CSS 的定位

在 CSS 中position 属性用于指定元素的定位方式，决定元素在文档流中的行为及其相对于谁进行定位。

示例：

默认定位 static


    

        一天，闷闷不乐的爱丽丝跟姐姐同坐于河畔。忽见一只古怪的白兔走过──它穿戴打扮，手持怀表，自言自语，行色匆匆。

        好奇的爱丽丝跟着它跑，跳进兔子洞里去。这个洞非常非常深，过了很久，爱丽丝终于着地。她惊觉自己身处奇怪的大厅，四周尽是大大小小的门，而所有门都被上了锁。

        她捡到一条门匙，却仅能开启一道小门。由于这道门实在太小了，她只能望过去，却发现那边有个标致的花园。

        她把门匙放在桌上，并在大厅别处找到一瓶写着“喝我”的饮料。

        爱丽丝不由分说把它喝完，发现自己缩小了，当能穿过小门，却拿不回桌上的门匙。

    

    


    
    

        positon:static;

    

    


    

        慌乱之际，她捡到一件写着“吃我”的蛋糕。这一次，爱丽丝吃掉它后竟又急速变大，大得连头顶也贴著天花板了。 

        爱丽丝不禁大哭起来，整个门厅尽是泪水。

        她不经意地捡起一把扇子，身体竟又变小了，她不得不在自己的泪水中游走。

        途中，她遇到一只同在游泳的老鼠。

        爱丽丝想要跟它闲聊几句，却总是把她的家猫“黛娜”挂在嘴边，结果当然触怒了视猫为死敌的老鼠。

        泪水冲走了其他动物和雀鸟；一时间，爱丽丝已被一群动物包围。

        他们聚集在岸边，讨论如何弄干身体。

        老鼠发表了一场有关威廉一世的冗长演说，爱丽丝听罢觉得无聊极了；渡渡鸟则认为最好的方法就是举行一场无结果的比赛：大家绕圈跑，而没有胜负之分。

        爱丽丝懵懵懂懂的又说起家猫，结果把所有动物都又吓跑了。

    

绝对定位 absolute


    

        一天，闷闷不乐的爱丽丝跟姐姐同坐于河畔。忽见一只古怪的白兔走过──它穿戴打扮，手持怀表，自言自语，行色匆匆。

        好奇的爱丽丝跟着它跑，跳进兔子洞里去。这个洞非常非常深，过了很久，爱丽丝终于着地。她惊觉自己身处奇怪的大厅，四周尽是大大小小的门，而所有门都被上了锁。

        她捡到一条门匙，却仅能开启一道小门。由于这道门实在太小了，她只能望过去，却发现那边有个标致的花园。

        她把门匙放在桌上，并在大厅别处找到一瓶写着“喝我”的饮料。

        爱丽丝不由分说把它喝完，发现自己缩小了，当能穿过小门，却拿不回桌上的门匙。

    

    


    
    

        positon:absolute;

        top: 50px;

        left: 50px;
    

    


    

        慌乱之际，她捡到一件写着“吃我”的蛋糕。这一次，爱丽丝吃掉它后竟又急速变大，大得连头顶也贴著天花板了。 

        爱丽丝不禁大哭起来，整个门厅尽是泪水。

        她不经意地捡起一把扇子，身体竟又变小了，她不得不在自己的泪水中游走。

        途中，她遇到一只同在游泳的老鼠。

        爱丽丝想要跟它闲聊几句，却总是把她的家猫“黛娜”挂在嘴边，结果当然触怒了视猫为死敌的老鼠。

        泪水冲走了其他动物和雀鸟；一时间，爱丽丝已被一群动物包围。

        他们聚集在岸边，讨论如何弄干身体。

        老鼠发表了一场有关威廉一世的冗长演说，爱丽丝听罢觉得无聊极了；渡渡鸟则认为最好的方法就是举行一场无结果的比赛：大家绕圈跑，而没有胜负之分。

        爱丽丝懵懵懂懂的又说起家猫，结果把所有动物都又吓跑了。

    

固定定位 fixed


    

        一天，闷闷不乐的爱丽丝跟姐姐同坐于河畔。忽见一只古怪的白兔走过──它穿戴打扮，手持怀表，自言自语，行色匆匆。

        好奇的爱丽丝跟着它跑，跳进兔子洞里去。这个洞非常非常深，过了很久，爱丽丝终于着地。她惊觉自己身处奇怪的大厅，四周尽是大大小小的门，而所有门都被上了锁。

        她捡到一条门匙，却仅能开启一道小门。由于这道门实在太小了，她只能望过去，却发现那边有个标致的花园。

        她把门匙放在桌上，并在大厅别处找到一瓶写着“喝我”的饮料。

        爱丽丝不由分说把它喝完，发现自己缩小了，当能穿过小门，却拿不回桌上的门匙。

    

    


    
    

        positon:fixed;

        top: 50px;

        left: 50px;
    

    


    

        慌乱之际，她捡到一件写着“吃我”的蛋糕。这一次，爱丽丝吃掉它后竟又急速变大，大得连头顶也贴著天花板了。 

        爱丽丝不禁大哭起来，整个门厅尽是泪水。

        她不经意地捡起一把扇子，身体竟又变小了，她不得不在自己的泪水中游走。

        途中，她遇到一只同在游泳的老鼠。

        爱丽丝想要跟它闲聊几句，却总是把她的家猫“黛娜”挂在嘴边，结果当然触怒了视猫为死敌的老鼠。

        泪水冲走了其他动物和雀鸟；一时间，爱丽丝已被一群动物包围。

        他们聚集在岸边，讨论如何弄干身体。

        老鼠发表了一场有关威廉一世的冗长演说，爱丽丝听罢觉得无聊极了；渡渡鸟则认为最好的方法就是举行一场无结果的比赛：大家绕圈跑，而没有胜负之分。

        爱丽丝懵懵懂懂的又说起家猫，结果把所有动物都又吓跑了。

    

黏性定位 sticky


    

        一天，闷闷不乐的爱丽丝跟姐姐同坐于河畔。忽见一只古怪的白兔走过──它穿戴打扮，手持怀表，自言自语，行色匆匆。

        好奇的爱丽丝跟着它跑，跳进兔子洞里去。这个洞非常非常深，过了很久，爱丽丝终于着地。她惊觉自己身处奇怪的大厅，四周尽是大大小小的门，而所有门都被上了锁。

        她捡到一条门匙，却仅能开启一道小门。由于这道门实在太小了，她只能望过去，却发现那边有个标致的花园。

        她把门匙放在桌上，并在大厅别处找到一瓶写着“喝我”的饮料。

        爱丽丝不由分说把它喝完，发现自己缩小了，当能穿过小门，却拿不回桌上的门匙。

    

    


    
    

        positon:sticky;

        top: 50px;

    

    


    

        慌乱之际，她捡到一件写着“吃我”的蛋糕。这一次，爱丽丝吃掉它后竟又急速变大，大得连头顶也贴著天花板了。 

        爱丽丝不禁大哭起来，整个门厅尽是泪水。

        她不经意地捡起一把扇子，身体竟又变小了，她不得不在自己的泪水中游走。

        途中，她遇到一只同在游泳的老鼠。

        爱丽丝想要跟它闲聊几句，却总是把她的家猫“黛娜”挂在嘴边，结果当然触怒了视猫为死敌的老鼠。

        泪水冲走了其他动物和雀鸟；一时间，爱丽丝已被一群动物包围。

        他们聚集在岸边，讨论如何弄干身体。

        老鼠发表了一场有关威廉一世的冗长演说，爱丽丝听罢觉得无聊极了；渡渡鸟则认为最好的方法就是举行一场无结果的比赛：大家绕圈跑，而没有胜负之分。

        爱丽丝懵懵懂懂的又说起家猫，结果把所有动物都又吓跑了。