WEB基础之：CSS定位position
定位position
position 属性规定元素的定位类型。 top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置(如top: 30px;)
| 属性值 | 描述 |
|---|---|
| static | 默认值。没有定位，将元素放入它在文档布局流中的正常位置（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 |
| absolute | 绝对定位的元素不再存在于正常文档布局流中。它自己的层独立于一切。这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。因为top，bottom，left和right以不同的方式在绝对定位。 它们指定元素应距每个包含元素的边的距离，而不是指定元素应该移入的方向。(margins 仍会影响定位的元素。 然而margin collapsing不会。) |
| fixed | 固定定位，与绝对定位的工作方式完全相同，一个主要区别：绝对定位固定元素是相对于<html>元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。 |
| sticky | 基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。演示示例 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
1.1 定位上下文
-
如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且
<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。(点击演示示例)。 -
绝对定位元素在HTML源代码中，是被放在
<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 ：绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 ，也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个父元素一定要包含绝对定位元素）。为了演示这一点，将以下声明添加到您的body规则中：
position: relative;
1.2 z-index
- 默认HTML是源顺序，源顺序中后定位的元素将赢得先定位的元素显示在上方。
- “z-index”是对z轴的参考,更改堆叠顺序,z-index只接受无单位索引值，较高的值将高于较低的值。
1.3 宽度和高度
width 和 height 用于限制定位元素的高度或宽度，只有在元素设置了padding, border, margin才会生效，原因是向内容区增加了padding, border, margin，而内容区的大小由height和width的值确定。若要保证元素不超出其包含块，可以去除 width 和 height 声明，或者显式地将其设置为auto。
min-width, min-height, max-width, max-height应用于所有非替换元素和表元素以外的所有元素。作用是限定定位元素的最小(或最大)宽度(或高度).
2. 内容溢出和剪裁
2.1 溢出overflow
overflow 属性控制当内容溢出元素框时的情况。
| 属性值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
2.2 剪裁clip
clip 属性剪裁绝对定位元素。
| 属性值 | 描述 |
|---|---|
| shape | 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) |
| auto | 默认值。不应用任何剪裁。 |
| inherit | 规定应该从父元素继承 clip 属性的值。 |
3. 元素可见性visibility
visibility 属性规定元素是否可见。
| 属性值 | 描述 |
|---|---|
| visible | 默认值。元素是可见的。 |
| hidden | 元素是不可见的。 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。 |
| inherit | 规定应该从父元素继承 visibility 属性的值。 |
4. 绝对定位
4.1 包含块和绝对定位
元素绝对定位时，会从文档流中完全删除。且可能覆盖其他元素或者被其他元素覆盖。
- 绝对元素的包含块是最近的position值不为static的祖先元素。通常会选择一个元素作为绝对元素的包含块，将其position指定为relative而且没有偏移。
- 定位一个元素，其包含块为根元素(如：
body {position: relative;}) - 元素绝对定位时，还会为其后代元素建立一个包含块。如可以将一个元素绝对定位，再将它的一个子元素绝对定位。
4.2 绝对定位元素的放置和大小
默认情况下绝对定位与其静态位置一致。静态位置：元素在正常流中原本的位置。
4.3 非替换元素的放置和大小
- 如从左向右读语言中，如果left, width, right 都设置为auto，左边界置于其静态位置，元素的width设置为该元素的内容区宽度恰好只能包含其内容。
- 假设margin-left, margin-right 设置为auto，而left, width, right 不是auto，margin-left, margin-right 会设置为相等的值，元素会居中显示。
- 假设外边距都不为空，过度受限情况下，用户代理会忽略right的值，并重置right的值。若某个外边距设置为auto，则会改变这个外边距。
- 针对垂直布局，规则类似。
4.4 替换元素的放置和大小
水平布局规则
- 如果width设置为auto，width的实际使用值由元素内容的固有宽度决定。
- 在从左向右读的语言中，如果left值为auto，要把auto替换为静态位置。
- 如果left或right仍为auto，则将margin-left或margin-right的auto替换为0。
- 如果此时margin-left和margin-right都还定义为auto，则把它们设置为相等的值，从而元素在其包含块中居中。
- 如果只剩一个auto值，则将其修改为等于等式的余下部分。
垂直布局规则
- 如果height设置为auto，height的计算值由元素内容的固有高度确定.
- 如果top的值为auto，将其替换为替换元素的静态位置。
- 如果bottom的值为auto，将margin-top或margin-bottom的所有auto值替换为0。
- 如果此时margin-top和margin-bottom都还定义为auto，将其设置为相等的值，从而使元素在其包含块中居中。
- 如果只剩下一个auto值，则将其修改为等于等式的余下部分。
