CSS笔记之定位方式（五）

六，定位方式

1.简介

通过position属性实现对元素的定位，有四种定位方式

常用取值：

取值	含义	说明
static	默认值	按照常规文档流进行显示
relative	相对定位	相对于标签原来的位置 进行的定位
absolute	绝对定位	相对于第一个非static定位 的父标签的定位
fixed	固定定位	相对于浏览器窗口进行定位

设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right

2，相对定位

先设置元素的position属性为relative，然后再设置偏移量

相对定位的特征:

1. 1. 相对定位的元素根据其原来的位置进行定位。如果没有设置位置，则元素的位置取决于其正常位置。
   2. 相对定位不从文档流中移出，因此占据布局空间。
   3. 相对定位的元素不会覆盖文档流中的其他元素。
   4. 相对定位在布局中比其他定位方式更为灵活，因为允许相对于元素原来的位置进行微调，而不会影响其他元素的布局。

语法格式:

position:relative;

3.绝对定位

先设置父标签为非static定位，然后设置元素的postion属性为absolute，最后再设置偏移量

绝对定位的特征:

1. 绝对定位的元素根据其包含块进行定位。包含块是其最近的已定位父元素或文档根元素。
2. 如果没有已定位父元素，则视为文档根元素为包含块。
3. 绝对定位的元素从文档流中移出，因此不占据布局空间。
4. 绝对定位允许使用top、right、bottom和left属性来精确定位元素的位置。

语法格式：

position: absolute;  

注意事项：

• 一般来说都会把父标签设置为非static定位

• 如果父标签不是非static定位，则会相对于浏览器窗口进行定位

• 设置元素为绝对定位后，元素会浮在页面上方

4.固定定位

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮在页面上方，脱离标准文档流

特点:

固定定位是一种CSS定位技术，可以将元素的位置固定在浏览器窗口或父级元素上。它类似于绝对定位，但有所不同。固定定位的元素的位置相对于浏览器窗口或父级元素固定，不会随着滚动条滚动而移动。

语法格式:

position: fixed;

5.粘滞定位

语法：

粘滞定位的特点是，当元素到达某个位置时，它会被固定在该位置

语法格式:

position: sticky;

注意：与固定定位不同的是，粘滞定位在元素到达指定位置之前会有滚动效果，到达指定位置后才被固定

6，z-index

设置元素定位方式后，元素在浮在页面上方，此时可以通过z­index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto（大多数浏览器默认为0）

注：只能给非static定位的元素设置z­-index属性