前端学习笔记 - float、relative、absolute、fixed之间的区别

返回目录

一、浮动：float

* 文档流：

    处在网页的最底层，它表示的是一个页面的位置
    
* 注意：

    我们创建的元素默认都会处在文档流中（最底层的位置）

* float：可选属性值
    
    * none：默认值，元素默认在文档流排列
    
    * left：元素向页面的左侧浮动
    
    * right：元素向页面的右侧浮动
    
    * 注意：

        浮动的元素不会脱离文档流，且不会挡住文字，文字会自动环绕在浮动元素的周围
           

二、定位：position

将指定的元素摆放在页面的任何位置，通过定位可以任意摆放元素

通过position属性来设置，属性值可以有以下几种：

    1、relative：表示元素开启开启相对定位

    2、absolute：表示元素开启开启绝对定位

    3、fixed：表示固定定位（也是绝对定位的一种）

    4、static：默认值，元素没有开启定位
           

1、相对定位：relative

* 特点：

    * 1、当开启了元素的相对定位以后，而不设置偏移量时，元素则不会发生任何变化。

    * 2、相对定位是相对于元素在文档流中原来的位置进行定位。

    * 3、相对定位不会脱离文档流。

    * 4、相对定位会使元素提升一个层级。

    * 5、相对定位不会改变元素的性质，块还是块，内联还是内联。
           

2、绝对定位：absolute

* 特点：
    * 1、开启绝对定位，会使元素脱离文档流。

    * 2、开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。

    * 3、绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的。（有两种情况）

        * 开启了子元素的绝对定位都会同时开启父元素的相对定位（父元素开启相对定位，子元素相对于父元素进行绝对定位）。

        * 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。

    * 4、绝对定位会使元素提升一个层级。

    * 5、绝对定位会改变元素的性质 内联元素会变成块元素，块元素的宽度和高度默认都被内容撑开。
           

3、固定定位：fixed

* 固定定位也是一种绝对定位，它的大部份特点和绝对定位是一样的。

* 不同的是：

    * 固定定位永远都会相对于浏览器窗口进行定位。