CSS学习--定位(position)

position

指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

position: static | relative | absolute | fixed | sticky;

static

静态定位，正常流布局。· 此时top，right，bottom 和 left 属性无效relative以元素在文档的正常流位置为参照点，通过top，right，bottom 和 left 属性进行偏移，占据文档位置。

#two {
	position: relative;
	top: 20px;
	left: 20px;
}

absolute

脱离文档流，绝对定位元素相对于最近的非 static 祖先元素定位。

#three {
	position: absolute;
	top: 20px;
	left: 20px;
}

fixed

以视口为参照物进行偏移，脱离文档流。

#bottom {
	position: fixed;
	bottom: 0px;
}

sticky

元素在跨越特定阈值前为相对定位，之后为固定定位。

#top-sticky {
	position: sticky;
	top: 10px;
}

z-index

设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

z-index; auto | <integer>;