定位（CSS笔记）

定位（position）

1.CSS布局三种机制

CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

网页布局核心–就是用css来摆放盒子位置的

1.普通流（标准流）
块级元素独占一行，从上下顺序排列
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行
常用元素：span、a、i、em等

2.浮动
让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示

3.定位
将盒子定在浏览器的某一个位置——CSS离不开定位，特别是后面的 js 特效

2.定位详解

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

2.1边偏移

我们定位的盒子，是通过边偏移来移动位置的
在css中，通过top、bottom、left和right属性定义元素的边偏移：（方位名词）

2.2定位模式

CSS中，通过position属性定义元素的定位模式：

选择器 {position: 属性值; }

定位模式是有不同分类的，在不同情况下，用到不同的定位模式

2.2.1静态定位(static)-了解

静态定位是冤死的默认定位方式，无定位的意思。相当于border里面的none，不要定位的时候用
静态定位 按照标准流特性摆放位置，他没有边偏移
静态定位在布局中几乎不用

2.2.2相对定位(relative)-重要

相对定位是元素相对于它 原本在标准流中的位置来说的
效果图：

相对定位特点：
相对于 原来在标准流中的位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

2.2.3绝对定位(absolute)-重点

绝对定位是元素以带有定位的父级元素来移动位置
1.完全脱标–完全不占位置
2.父元素没有定位，则以浏览器为准定位

3.父元素要有定位
将元素依据最近的已经定位(绝对、固定或相对定位)的父元素进行定位

绝对定位特点：
绝对是带有定位的父级元素来移动位置 如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的
绝父定位一般和父级搭配使用

定位口诀–子相父绝
子级是绝对定位，父级要用相对定位

在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

1.小盒子（箭头）
相对定位 相对定位占据位置，会影响后面盒子的显示
绝对定位 绝对定位不占据位置，脱离标准流

2.父盒子
相对定位 相对定位占据位置，按照正常标准流显示，后面的盒子按照正常显示
绝对定位 绝对定位不占据位置，后面的盒子顶替到之前的位置

总结：
由于子元素，不占据位置，所以我们使用绝对定位
由于父元素占据位置，不能影响后面元素的正常显示，我们使用相对定位

2.2.4固定定位(fixed)-重要

固定定位是绝对定位的一种特殊形式：如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
1.完全脱标–完全不占位置
2.只认浏览器的可视窗口–浏览器可视窗口 + 边偏移属性 来设置元素的位置
跟父元素没有任何关系，单独使用
不随滚动条滚动

3.定位(position)的扩展

3.1绝对定位的盒子居中

注意： 绝对定位/固定定位的盒子不能通过设置margin:auto设置水平居中
使用绝对定位时要想实现水平居中，可以按照下图的方法：

1.left: 50%; :让盒子左侧移动到父级元素的水平位置；
2.margin-left: -100px; : 让盒子左移自身宽度的一半。

3.2堆叠顺序(z-index)

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子
应用z-index 层级等级属性可以调整盒子的堆叠顺序。如下图：

z-index的特性如下：
1.属性值： 正整数、负整数或0，默认值是0，数值越大，盒子越靠前
2.如果属性值相同，则按照书写顺序，后来者居上
3.数字后面不能加单位

注意：z-index 只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

3.2定位改变display属性

display 是 显示模式， 可以改变显示模式有以下方式:
可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说，一个行内盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以直接给盒子设置宽度和高度

同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

4.定位小结

注意：
1.边偏移需要和定位模式联合使用，单独使用无效；
2.top和bottom不要同时使用
3.left和right不要同时使用

5.网页布局总结

一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。

1).标准流

可以让盒子上下排列 或者 左右排列的

2).浮动

可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列

3).定位

定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。

6.圆角矩形设置4个角(扩展)

圆角矩形可以为4个角分别设置圆度，但是有顺序的

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

如果4个角，数值相同

border-radius: 15px;

里面数值不同，我们也可以按照简写的形式，具体格式如下：

border-radius: 左上角 右上角 右下角 左下角;

遵守顺时针