CSS 定位总结

元素显示模式
- 元素模式
- 元素显示模式转换
CSS定位机制
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed
粘性定位sticky
定位小结一图流

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

元素显示模式

元素模式

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度&高度	容器的100%	任何标签
行内元素	一行内可以放多个行内元素	不可以直接设置宽度&高度	内容的宽度	文本或其他行内元素
行内块元素	一行内可以放多个行内块元素	可以设置宽度&高度	内容的宽度

常见块级元素有<h1>~<h6> <p> <div> <ul> <ol> <li> 等，其实<div> 标签是最经典的块级元素。常见的行内元素<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等，其中<span> 标签是最典型的行内元素，行内元素有时也被称作内联元素。而行内块元素同时具有块级元素和行内元素的特点，它既可以设置宽度&高度，还能在一行内摆放多个。

元素显示模式转换

特殊情况下，我们需要元素模式的转化，简单理解：一个模式的元素需要另一种模式的特性，比如想要增加链接<a>的触发范围等。

转化为块元素：display：block
转换为行内元素：display：inline
转换为行内块元素：display：inline-block

CSS定位机制

所谓定位，实际上就是将盒子定在某一个位置，按照定位的方式摆放盒子。定位=定位模式 + 边偏移，定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

可以利用 position 属性来决定元素的定位模式，一共有以下5种定位模式:

static 静态定位
relative 相对定位
fixed 固定定位
absolute 绝对定位
sticky 粘性定位

边偏移由以下4个属性定义:

top
left
right
buttom

静态定位static

static是position的默认值，如果省略position属性，则浏览器默认该元素为静态定位。所谓静态定位即浏览器按照源码的顺序，决定每个元素的位置，这称为正常的页面流。每个块级元素占据自己的区块，元素与元素之间不产生重叠，这个位置就是元素的默认位置。

相对定位relative

如果对一个元素进行相对定位，它将出现在它所在的位置（原静态定位的位置）上。然后，可以通过设置边偏移来让该元素相对于它的起点进行移动。

#box_relative {

  position: relative;

  left: 30px;

  top: 20px;

}

在使用相对定位时，无论是否相对于原来的起点进行移动，元素仍占据原来的空间，因此移动的元素可能会覆盖其他元素，同时其他元素不会占据元素原来的空间。

绝对定位absolute

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

#box_relative {

  position: absolute;

  left: 30px;

  top: 20px;

}

普通流中的其他元素在布局时会将绝对定位的元素当作不存在一样对待。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（例如以浏览器为标准）。

一般而言，子类是相对定位的话，父亲要用绝对定位，即子绝父相。

子类绝对定位，不会占有位置，可以在父盒子中任意摆放且不会影响其他兄弟盒子。
父盒子需要加定位限制子盒子在父盒子中显示，父盒子布局时又要占有位置，因此父盒子最好采用相对定位

固定定位fixed

固定定位的元素的位置相对于浏览器是固定的，即不随着浏览器页面的滚动而改变位置，若浏览器页面大小发生改变，该元素相对于浏览器的位置不变，固定定位可以看作是特殊的绝对定位。同时，固定定位不占有原来的位置。

#box_fixed {

  position: fixed;

  left: 30px;

  top: 20px;

}

粘性定位sticky

粘性定位很像是固定定位fixed和相对定位relative的结合，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
当页面滚动未超出目标区域时，它的表现和普通的postition:relative一样。

利用粘性定位可以实现很多效果，例如很多网页的侧栏。

tip : Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

定位小结一图流

定位模式	是否脱离标准流	移动位置
静态定位static	×	不能使用边偏移
相对定位relative	×	相对于自身位置偏移
绝对定位absolute	√	相对于带定位的最近父元素
固定定位fixed	√	相对于浏览器可视区域
粘性定位	×	相对于浏览器可视区域