css定位

定位模式

选择器 { posotion: 定位模式 }

模式	是否脱离文档流	说明
static	否	静态定位
relative	否	相对定位
absolute	是	绝对定位
fixed	是	固定定位
sticky	否	粘性定位

边偏移

定位盒子移动到最终位置。

边偏移属性	示例	描述
top	top:100px	顶端偏移量，定义元素相对其父元素的上边线的距离。
bottom	bottom:100px	底部偏移量，定义元素相对其父元素的下边线的距离。
left	left:100px	左侧偏移量，定义元素相对其父元素的左边线的距离。
right	right:100px	右侧偏移量，定义元素相对其父元素的右边线的距离。

#

static 定位

默认定位方式 表示无定位。将按照标准流的特性摆放元素。且无偏移

相对定位 relative

• 1、相对定位 是元素位置偏移相对于元素 原来的位置 来确定偏移后的位置的。
• 2、原来在标准流中的位置继续占有，不脱离标准流。

绝对定位 absolute

绝对定位 位置偏移是依据 祖先元素

• 1、绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

2、绝对定位使元素的位置与文档流无关，因此不占据空间。脱离标准流。

注释

• 根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
• 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

子绝父相

含义：子级使用绝对定位，父级则需要使用相对定位。

• 1、子级元素绝对定位，不占用位置，可以放到盒子的任意地方。且不会影响其他兄弟盒子。
• 2、父盒子需要添加定位限制子盒子在父盒子中显示。
• 3、父盒子布局时需要占有位置，因此父盒子只能相对定位。

固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。

主要使用场景:可以在浏览器页面滚动时元素的位置不会改变

粘性定位 sticky

• 1、以浏览器视口为参照点一定元素 （固定定位特点）
• 2、粘性定位 占有原先的位置 （相对定位特点）
• 3、必须添加top 、left 、bottom、right 其中一个才有效。

跟页面滚动搭配使用，兼容性较差，IE不支持。

搭配z-index控制盒子重叠时 z轴显示顺序

#