css中的固定定位例子超详细！！！

蔚落 2023-01-10 14:52 139阅读 0赞

**固定定位是什么呢？**  
**固定定位是元素固定于浏览器可视区的位置。主要作用是可以在浏览器页面滚动时元素的位置也不会改变。**  
语法：  
\{  
position:fixed;  
\}

## 例子举起来~ ##

还没加固定定位的html代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="fixed.css">
    </head>
    <body>
        <p>你真是一只可爱的小猪猪</p>
        <p>你真是一只可爱的小猪猪</p>
        <p>你真是一只可爱的小猪猪</p>
        <p>你真是一只可爱的小猪猪</p>
        <p>你真是一只可爱的小猪猪</p>
        <p>你真是一只可爱的小猪猪</p>
        <p>你真是一只可爱的小猪猪</p>
        <p>你真是一只可爱的小猪猪</p>
        <div class="box">
            <img src="images/img_03.png" alt="">
        </div>
        <div class="boxright">
            <img src="images/img_03.png" alt="">
        </div>
    </body>
    </html>

还没加固定定位的css代码：

p {
        
        text-align: center;
    }
    .box {
        
        width: 100px;
    height: 300px;
    }
    .box img{
        
           
        width: 100%;
    }
    .boxright {
        
        width: 100px;
    height: 300px;
    }
    .boxright img{
        
        width: 100%;    
    }

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]

## 重点在这里↓↓↓ ##

html代码不变，css代码加上固定定位的代码如下：

p {
        
        text-align: center;
    }
    .box {
        
        width: 100px;
    height: 300px;
    position: fixed;
    top: 100px;
    left: 0px;
    }
    .box img{
          
        width: 100%;
    }
    .boxright {
        
        width: 100px;
    height: 300px;
    position: fixed;
    top: 100px;
    right: 0px;  
    }
    .boxright img{
        
        width: 100%;  
    }

代码解释图片：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]

运行图片如下，因为小猪太少了，我故意缩小浏览器界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
此时，就能出现滚动条，你会发现，无论你怎么滚动，图片就是在可视窗口的固定位置哦~

结尾解释：  
1.固定定位是以浏览器可视窗口为准来移动元素的  
2.固定定位的盒子和父盒子是没有关系的，要和上文子绝父相区分开。  
3.固定定位的盒子它很有主见，不随滚动条滚动而滚动  
4.固定定位也是不占有原先位置的哦~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221119/2cd0e865e0d34fa5bb01c08bb1facb82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221119/56ef00a7e4b647309d855bda28a76c32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221119/6fc4db52414945a783838c569ac64bee.png