元素的定位属性

元素的定位属性主要包括定位模式和边偏移

1. 边偏移属性：top | bttom | left | right
2. 定位模式

选择器 {
	position: 属性值;
}

• 相对定位relative

相对定位是将元素相对于它在标准流中的位置进行定位，当对元素设置相对蒂尼改为后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

注意：

1. 相对定位，它可以通过边偏移移动位置，但是原来所占的位置继续占有。
2. 每次移动的位置，都是以自己的左上角为基点移动的。

• 绝对定位absolute

绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全投标，完全不占用位置。

1. 父级没有定位
   若所有父元素都没有定位，以浏览器为准对对齐。

2. 父级有定位
   绝对定位是将元素依据最近的已经定位（绝对，固定或相对定位）的父元素进行定位。

绝对定位的盒子水平/垂直居中

普通盒子是左右margin改为auto就可以，但是对于绝对定位就无效了

1. 首先left: 50% 父盒子的一般大小
2. 然后走自己外边距负的一半值就可以了 margin-left.

• 固定定位fixed

固定定位是绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素。当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

注意：

1. 固定定位的元素跟父元素没有任何关系，只认浏览器。
2. 固定定位完全脱标,不占有位置，不随着滚动条滚动。

• 叠放次序(z-index)

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在css中 ，想要调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数，负整数和0.

选择器 { z-index: 2}

注意：

1. z-index的默认属性是0，取值越大，层级越高。
2. 如果取值相同，则根据书写顺序，就近原则。
3. 后面的数字不能加单位
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性。

四种定位总结

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素显示模式也发生转换，都转换为行内块。
所以当行内元素如果添加了绝对定位和固定定位，浮动后，可以不用转换模式，直接给高度和宽度就可以了