目标:
- 学习CSS定位模型
- 可以利用定位模型布局
position简介
- 作为模块:
- 提供与元素定位和层叠相关的功能,是核心模块。
- 此模块包含的内容:
- 盒子模型的类型和尺寸
- 布局模型
- 元素之间的关系
- 视口大小、图像大小等其他相关方面
- 作为属性:
.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
继承父元素的定位模型。(不推荐使用)