CSS基础知识点--CSS定位(position)

定位模型

• static：自然模型

• relative：相对定位模型

• absolute：绝对定位模型

• fixed：固定定位模型

• sticky：磁贴定位模型

static模型

静态定位 / 常规定位 / 自然定位

特点：

1. 忽略掉top、bottom、left、right 或者 z-index 声明

2. 两个相邻的元素如果都设置了外边距，那么最终外边距 = 两者外边距中最大的

3. 具有固定 width 和 height 值的元素，如果把左右外边距设置为 auto ，则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块居中

relative模型和absolute模型

特点：

1. relative模型（相对定位）：不脱离常规流

2. absolute模型（绝对定位）：脱离常规流

3. 若父元素是相对定位，并且子元素是绝对定位，那么子元素的绝对定位是相对父元素

4. 继上一个特点情况，若是想要实现子元素的块垂直或水平居中

   • right 为 0 ，并且 left 为 0 ，margin 为 0 auto。实现水平居中

   • top 为 0 ，并且 bottom 为 0 ，margin 为 auto 0。实现垂直居中

   • top、right、bottom、left 均为 0，margin 为auto。实现水平垂直居中

   • 若 top、right、bottom、left 均为 auto，则会变为常规流（疑似有问题）

5. 定位的垂直水平居中，<font color="red">必须写定位模式</font>

   • 需要给元素设置 top：50%，然后再 margin-top:负本身高度的一半。实现垂直居中

   • 需要给元素设置 left：50%，然后再 margin-left:负本身宽度的一半。实现水平居中

fix模型

有些类似于 background-attachment 属性

sticky模型（CSS3）

磁贴定位 / 粘性定位 / 吸附定位

作用：relative + fixed 的完美结合，制造出吸附效果

特点：

1. 如果产生偏移，原位置还是会在常规流中

2. 如果它的最近父元素有滚动，那么它的偏移标尺就是最近的父元素

3. 如果最近父元素没有滚动，那么它的偏移标尺是视口

4. 上下左右的偏移规则

5. top等定位属性更像是条件，而非是坐标