CSS笔记之定位模型

目标：

• 学习CSS定位模型
• 可以利用定位模型布局

position简介

• 作为模块：
  • 提供与元素定位和层叠相关的功能，是核心模块。
  • 此模块包含的内容：
  1. 盒子模型的类型和尺寸
  2. 布局模型
  3. 元素之间的关系
  4. 视口大小、图像大小等其他相关方面
• 作为属性：

  .box{
  	position:relative;
  }
  

• 其他相关属性：
  • top/bottom/left/right
  • z-index

static 自然模型

1.作用：
使元素定位于常规流。（块、行垂直排列下去。行内水平从左到右。）
2.特点：

• 忽略top,bottom,left,right,z-index声明。
• 两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的。
• 具有固定width和height的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中。

relative 相对定位模型

1.作用：
使元素成为containing-block（可定位的祖先元素）。
2.特点：

• 可以使用top/right/bottom/left/z-index进行相对定位。（默认相对的是该元素原本在常规流的位置）
• 相对定位的元素不会离开常规流。
• 任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位——超好用。
• 可以使浮动元素发生偏移，并控制它们的堆叠顺序。

absolute 绝对定位模型

1.作用：
使元素成为脱离常规流。
2.特点：

• 脱离常规流。
• 设置尺寸要注意：百分比比的是谁？——最近定位祖先元素(position为relative的元素)。
• lrtb（left/right/top/bottom）如果设置为0，它将对齐到最近定位祖先元素的各边（填充满）（此时设置margin:auto auto;可水平垂直居中）
• lrtb如果设置为auto，它将被打回原形。
• 如果没有最近定位元素，会认为父亲。
• z-index可以控制堆叠顺序。

fixed 固定定位模型

1.作用：
和绝对定位本是同根生，相煎何太急。
2.特点：

• 和absolute的区别：相对于视口做绝对定位。
• 固定定位元素不会随着视口滚动而滚动。
• 继承absolute特点。

sticky 磁贴定位模型

1.作用：
relative+fixed的完美结合，制造出吸附效果。常用于导航。
2.特点：

• 如果发生偏移，原位置还是会在常规流中，留着一亩三分地。
• 如果它的最近祖先元素滚动，那么它的偏移标尺就是最近的祖先元素。
• 如果最近祖先元素没有滚动，那么它的偏移标尺是视口。
• 上下左右的偏移规则。

.nav{
	postion:sticky;
	top:0;
}

inherit

继承父元素的定位模型。（不推荐使用）