css的定位

定位

前面学到了标准流和浮动，今天接触第三个：定位。
标准流，浮动，定位三个的关系，可以归纳为上中下的关系，

• 下是标准流，在最底层，遵循由上自下的关系，盒子之间不会堆叠。

• 中是浮动，在中层，浮动元素在标准流之上，兄弟关系的标准流与浮动，会出现浮动覆盖标准流的现象，这是因为浮动元素并不真正的占据有位置。浮动元素遵循行排列，多个浮动元素在一起时，会排列成行，当父级元素宽度不足排列时则换行排列。

• 上是定位，在最顶层。定位元素压在所有其他元素之上。并可以自由移动位置。定位有四种不同模式。定位是由定位模式加上边偏移

---

• 静态定位(position: static)

这个几乎不会使用，静态定位相当于无，是用来消除定位的，但是实际使用中如果不需要定位，之间将定位属性删除即可。

• 相对定位(position: relative)

相对定位这个相对指的是相对于盒子当前的位置，在我们给他加边偏移时，是相对于盒子原本的位置去移动的，相对定位是占据有位置的，虽然他移动到了其他地方，但是他的位置是不会被其他标准流盒子霸占的。

• 绝对定位(position:absolute)

绝对定位是基于有定位的父级元素来定位的，如果所有的父级元素中都没有定位，则会以浏览器的可视范围为基准。所以当我们在编写时，希望将一个定位元素局限在一个父级元素中时，就要给这个父级元素添加定位，一般来说，遵循父绝子相的原则，因为绝对定位是不占据位置的，如果下面有其他的标准流盒子，会将他的位置占据。

• 固定定位(position:fixed)

在网页中通常会出现不随滚动而动的元素，他们固定在某一位置。这就是固定定位元素。固定定位不占据位置，他不同于绝对定位，是无非被限制在某个父级元素中的，他只以浏览器的可视范围为基准。

注意：浮动和定位会转换元素的属性，在前面用display来进行行内元素，块级元素，行内块元素的转换，在我们给一个元素添加浮动和定位时，这个元素就转换为了行内块元素（浮动为类行内块元素），无需再次转换，而且，浮动和定位所改变的属性无需担心内外边距合并的问题。（或许涉及到所谓标准盒子和IE盒子的概念？暂未学习…）

---

拓展

• 定位的盒子居中对齐

在以往我们想要一个盒子去居中对齐时只需要加上margin:aotu就可以实现，但在定位元素中这个方法就失效了，因为定位元素不同于标准流和浮动，盒子的位置移动是通过边偏移来实现的。当我们想要一个定位元素居中对齐时只需要先将定位元素左边偏移50%，在将margin-left回调定位元素宽度的一半即可。

<style>
	.box {
		position: fixed;
		top: 0;
		left: 50%;
		margin-left: -50px;
	}
</style>

回调时使用的是负值，水平垂直居中也是这样实现的，把left值改为top值即可，而外边距值改为高度的一半。

<style>
	.box {
		position: fixed;
		top: 50%;
		left: 0%;
		margin-top: -50px;
	}
</style>

• 定位的堆叠顺序

兄弟关系的定位元素会堆叠到一起，遵循后来居上的规则。但是我们也可以通过给某个元素添加
z-index元素来让某个元素在最顶层。
z-index： 1；
这个值只能是负整数或者正整数，默认值为0，数值越大则盒子越靠上。
如果属性值都一样则按照默认的后来居上顺序排列。这个属性值是没有单位的。