本文详细介绍了CSS中的定位概念，包括定位的作用、定位组成，以及静态定位、相对定位（重要）、绝对定位、固定定位和粘性定位的特性与应用场景。通过实例解析了不同定位模式下元素的位置变化，强调了"子绝父相"原则在布局中的应用，并探讨了固定定位在页面滚动中的独特效果和粘性定位的特性。
目录
定位
定位的作用
可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
定位组成
将盒子定在某一个位置，所以定位也就是在摆盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定元素在文档中的定位方式，边偏移决定该元素的最终位置
定位模式：position属性
static 静态
relative 相对
absolute 绝对
fixed 固定
sticky 粘性
边偏移：top bottom left right 四个属性
top:80px 即盒子距离顶部80px
静态定位 static
静态定位是元素的默认定位方式，无定位的意思
- 静态定位按照标准流特性摆放位置，他没有边偏移
- 静态定位在布局中很少用到
相对定位 relative（重要）
相对定位是元素在移动位置的时候，相对于它原来的位置来移动的
原来的位置依然保留 不脱标
绝对定位 absolute
绝对定位是元素在移动位置的时候，相对于祖先元素来说的
特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器（document文档）为准定位
- 只要祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动位置
- 绝对定位会脱标，不再保留原先的位置
什么时候用相对定位 什么时候用绝对定位（子绝父相）
子级是绝对定位的话，父级要用相对定位
- 子级绝对定位，不占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时需要占有位置，因此父亲只能是相对定位
因为父级需要占有位置因此是相对定位，子盒子不需要占有位置，则是绝对定位
子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到
固定定位 fixed
元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动的时候元素位置不会改变
特点：
1.以浏览器的可视窗口来作为参照点移动。
- 跟父元素没有任何关系
- 不随滚动条滚动
2.固定定位不在占有原先的位置
- 固定定位也是脱标的，也可以看作一种特殊的绝对定位。
*固定在版心右侧位置
固定定位
left：50% 走整个版心的一半
margin-left:600px; 用margin走版心盒子一半的距离
粘性定位 sticky 了解
相对定位和固定定位的混合
特点：
- 以浏览器的可视窗口为参照点来移动元素
- 占有原先的位置
- 必须添加top bottom left right其中一个边偏移才能有效， 否则相当于相对定位
- 兼容性差，ie不支持
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
