CSS定位总结大全

定位(position)

如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。

元素的定位属性

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

定位模式 + 边偏移 = 完整定位

1、边偏移
比如 top: 100px; left: 30px; 等等

2、定位模式
选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)（标准流）

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

一般他用来 清除定位的。 一个原来有定位的盒子，不想加定位了，就写这句话

相对定位relative(自恋型)（占有位置 不脱离标准流）

绝对定位absolute （不占位置，脱离标准流）

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

水平居中：
left:50%; /* left 父盒子宽度的一半 /
margin-left: -50px; / 左走自己宽度 的一半 */
垂直居中:
top: 50%;
margin-top: -20px;

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

子绝父相

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

固定定位fixed(认死理型)

固定定位有两点：

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

background: rgba(255, 255, 255, 0.3);/* 255是纯白色 盒子背景半透明 /
float: left; / 让块级元素横向对齐*/
border-radius: 50%; /* 圆角的做法 */

叠放次序（z-index）

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

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，占有位置	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

定位模式转换

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