css定位的类型和使用方法

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

一、position定位

1、static

静态定位（无定位）

2、relative（绝对定位）

遵循正常的文档流，相对自己的原位置定位，定位后原位置保留。 top，right，left，bottom值可选

3、absolute（绝对定位）

脱离正常的文档流，不保留原位置，运用top，right，left，bottom进行定位，一般选两个值。

必须是父子级定位，如果父级没有定位，就会逐级往上找，直到以浏览器为定位。

4.fixed（固定定位）

脱离文档流，不保留原位置，相对于浏览器窗口定位，出现滚动条时不滚动。

二、z-index

设置元素的叠放顺序，处理静态定位的其他定位方式都能使用，z-index的值越高，叠的位置就越在上面，z-index的值可以为负。 因为两个元素同时定位，元素会被遮盖。所以需要设置谁在上面，谁在下面。