CSS定位知识总结

一、定位类型

定位类型共分为：1.固定定位   2.相对定位  3.绝对定位   4.静态定位四种。

二、元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1.定位模式

在 CSS 中， position 属性用于定义元素的定位模式，其基本语法格式如下：

选择器 {position: 属性值 ;}

position属性的常用值：

static ：自动定位（默认定位方式）

relative ：相对定位，相对于其原文档流的位置进行定位

absolute ：绝对定位，相对于其上一个已经定位的父元素进行定位

fixed ：固定定位，相对于浏览器窗口进行定位

2.边偏移

top ：顶端偏移量，定义元素相对于其父元素上边线的距离

bottom ：底部偏移量，定义元素相对于其父元素下边线的距离

left :左侧偏移量，定义元素相对于其父元素左边线的距离

right :右侧偏移量，定义元素相对于其父元素右边线的距离

4.静态定位 (static)

静态定位是所有元素的默认定位方式，当 position 属性的取值为 static 时，可以将元素定位于静态位置。

所谓静态位置就是各个元素在 HTML文档流中默认的位置。在静态定位状态下，无法通过边偏移属性（ top 、 bottom 、 left 或 right ）来改变元素的位置。

5.相对定位（ relative）

相对定位是将元素相对于它在标准流中的位置进行定位，当 position 属性的取值为 relative 时，可以将元

素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如

下图所示，即是一个相对定位的效果展示：

6.绝对定位（ absolute）

[ 注意 ] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当 position 属性的取值为 absolute 时，可以将元素的定位模式设置为绝对定位。

6.1 父级没有定位

若所有父元素都没有定位，以浏览器为准对齐 (document 文档)。

6.2 父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位

6.3 子绝父相

这个 “ 子绝父相 ” 太重要了，是我们学习定位的口诀，时时刻刻记住的 子绝父相 就是指子元素设置绝对定位，而父元素设置相对定位。换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。

首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位.就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

但是，在我们网页布局的时候， 最常说的 子绝父相是怎么来的呢？

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位 .

这就是子绝父相的由来。

三、固定定位fixed

固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来

定义网页元素。当 position 属性的取值为 fixed 时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。

不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。

2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。