非零基础自学前端最后一遍一 HTML+CSS 15 CSS元素定位 15.2 布局-元素定位-position属性介绍

古城微笑少年丶 2024-03-22 16:01 69阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  15 CSS元素定位
         *   *  15.2 布局-元素定位-position属性介绍
             *   *  15.2.1 认识元素的定位
                 *  15.2.2 认识position属性
                 *  15.2.3 静态定位 - static

![在这里插入图片描述][8dd199418b044546a3dedc256f333271.png_pic_center]

#### 一 HTML+CSS ####

#### 15 CSS元素定位 ####

##### 15.2 布局-元素定位-position属性介绍 #####

###### 15.2.1 认识元素的定位 ######

*  定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:
    
     *  例如放在另一个元素的上面;
     *  或者始终保持在浏览器视窗内的同一位置;
 *  定位在开发中非常常见:

![在这里插入图片描述][f87b1c68550141bc96bea89a3c39519b.png_pic_center]

###### 15.2.2 认识position属性 ######

*  利用position可以对元素进行定位，常用取值有5个:
    
    ![在这里插入图片描述][7b3e2b797fde4da9b636432219257e09.png_pic_center]
 *  默认值:
    
     *  static：默认值, 静态定位
        
        ![在这里插入图片描述][0f6c45257c40432687c9063c1d5ffdda.png_pic_center]
 *  使用下面的值, 可以让元素变成 定位元素(positioned element)
    
     *  relative：相对定位
     *  absolute：绝对定位
     *  fixed：固定定位
     *  sticky：粘性定位

###### 15.2.3 静态定位 - static ######

*  position属性的默认值
    
     *  元素按照normal flow布局
     *  left 、right、top、bottom没有任何作用

![在这里插入图片描述][342887a065f84a50a45b67abf9697ece.png_pic_center]

没有任何改变，可以认为在static 模式下，这些属性没有被激活。

[8dd199418b044546a3dedc256f333271.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/17a38368f9754bb28d8480748a392f26.png
[f87b1c68550141bc96bea89a3c39519b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/956d7c85552f44db9b0abf1c89cd1c66.png
[7b3e2b797fde4da9b636432219257e09.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/84f71b0b67e643dfb79be476832322ac.png
[0f6c45257c40432687c9063c1d5ffdda.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/30ef720dd93f43aa95eb41bc8cbd7fb5.png
[342887a065f84a50a45b67abf9697ece.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7c07074e632449e0a4a6d455cd1ee1b9.png