CSS定位

定位=定位模式+边偏移

定位模式：

static静态定位

relative相对定位

absolute绝对定位

fixed固定定位

边偏移：有top,bottom,left,right 例如：top : 80px(距离顶部80px）

---

相对定位

元素移动位置的时候，是相对于它原来的位置来说的

语法：选择器 {position：relative;}

没有脱标(脱离标准流）

绝对定位

元素移动位置的时候，是相对于它的祖先元素来说的

语法：选择器 {position：absolute;}

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位

2.如果祖先有定位，不论是哪种，则以最近的定位的祖先元素为准进行定位

绝对定位脱标

子绝父相

子级是绝对定位的话，父亲要用相对定位

因为父亲必须要占有位置，所以要用相对定位，子盒子不需要占有位置

固定定位

固定定位是元素固定与浏览器可视区的位置。例如：可以在浏览器页面滚动时元素的位置不会改变

语法：选择器{ position : fixed; }

1.以浏览器的可视窗口为参照点移动元素

2.固定定位也是脱标的

---

定位的叠放次序

z-index控制盒子的前后次序(z轴）

语法：选择器{ z-index : 1; }

1.数值可以正整数、负整数、0，默认是auto，数值越大，盒子越上

2.如果属性相同后来者居上

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平居中和垂直居中

1.left:50%;让盒子的左侧移动到父级元素的水平中心位置

2.margin-left:-100px;让盒子向左移动自身宽度的一半

定位的特殊特性：

1.行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度

2.块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

3.浮动只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字，但是绝对定位会压住所有的内容