定位
- 1. 相对定位
- 1.1 如何设置相对定位？
- 1.2 相对定位的参考点在哪里？
- 1.3 相对定位的特点：
- 2. 绝对定位
- 2.1 如何设置绝对定位？
- 2.2 绝对定位的参考点在哪里？
- 2.3 绝对定位元素的特点：
- 3. 固定定位
- 3.1 如何设置为固定定位？
- 3.2 固定定位的参考点在哪里？
- 3.3 固定定位元素的特点
- 4. 粘性定位
- 4.1 如何设置为粘性定位？
- 4.2 粘性定位的参考点在哪里？
- 4.3 粘性定位元素的特点
- 5. 定位层级
- 6. 定位的特殊应用
- 6.1 让定位元素的宽充满包含块
- 6.2 让定位元素在包含块中居中
1. 相对定位
1.1 如何设置相对定位？
- 给元素设置 position:relative 即可实现相对定位。
- 可以使用 left 、right 、top 、bottom四个属性调整位置。
1.2 相对定位的参考点在哪里？
- 相对自己原来的位置
1.3 相对定位的特点：
- 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：- 定位的元素会盖在普通元素之上。
- 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
- left不能和 right 一起设置，top 不能和bottom 一起设置。
- 相对定位的元素，也能继续浮动，但不推荐这样做。
- 相对行为的元素，也能通过margin 调整位置，但不推荐这样做。
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。
2. 绝对定位
2.1 如何设置绝对定位？
- 给元素设置 position: absolute 即可实现绝对定位。
- 可以使用 left 、right 、top 、bottom 四个属性调整位置。
2.2 绝对定位的参考点在哪里？
- 参考它的包含块。
什么是包含块？
- 对于没有脱离文档流的元素：包含块就是父元素；
- 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。
2.3 绝对定位元素的特点：
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left不能和 right 一起设置，top 不能和bottom 一起设置。
- 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
- 绝对定位的元素，也能通过margin 调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。
3. 固定定位
3.1 如何设置为固定定位？
- 给元素设置 position: fixed 即可实现固定定位。
- 可以使用 left 、right 、top 、bottom 四个属性调整位置。
3.2 固定定位的参考点在哪里？
- 参考它的视口
什么是视口？—— 对于PC浏览器来说，视口就是我们看网页的那扇“窗户”。
3.3 固定定位元素的特点
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left 不能和 right 一起设置，top 不能和bottom 一起设置。
- 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
- 固定定位的元素，也能通过margin 调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素
4. 粘性定位
4.1 如何设置为粘性定位？
- 给元素设置 position:sticky 即可实现粘性定位。
- 可以使用 left 、right 、top 、bottom 四个属性调整位置，不过最常用的是top 值。
4.2 粘性定位的参考点在哪里？
- 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先（父元素高度大于子元素高度，但父元素设置了overflow:scroll）。
4.3 粘性定位元素的特点
- 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的值是top 值。
- 粘性定位和浮动可以同时设置，但不推荐这样做。
- 粘性定位的元素，也能通过margin 调整位置，但不推荐这样做。
粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。
案例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>粘性定位</title><style>* {margin: 0;padding: 0;}body {height: 2000px;}.page-header {height: 100px;text-align: center;line-height: 100px;background-color: orange;font-size: 20px;}/* .content { *//* height: 200px; *//* overflow: auto; *//* overflow: scroll; *//* } */.item {background-color: gray;}.first {background-color: skyblue;font-size: 40px;position: sticky;top: 0px;/* float: right; *//* margin-right: 100px; */}</style>
</head>
<body><!-- 头部 --><div class="page-header">头部</div><!-- 内容区 --><div class="content"><!-- 每一项 --><div class="item"><div class="first">A</div><h2>A1</h2><h2>A2</h2><h2>A3</h2><h2>A4</h2><h2>A5</h2><h2>A6</h2><h2>A7</h2><h2>A8</h2></div><div class="item"><div class="first">B</div><h2>B1</h2><h2>B2</h2><h2>B3</h2><h2>B4</h2><h2>B5</h2><h2>B6</h2><h2>B7</h2><h2>B8</h2></div><div class="item"><div class="first">C</div><h2>C1</h2><h2>C2</h2><h2>C3</h2><h2>C4</h2><h2>C5</h2><h2>C6</h2><h2>C7</h2><h2>C8</h2></div></div>
</body>
</html>
5. 定位层级
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
- 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
- 可以通过 css 属性 z-index 调整元素的显示层级。
- z-index 的属性值是数字，没有单位，值越大显示层级越高。
- 只有定位的元素设置 z-index 才有效。
- 如果z-index 值大的元素，依然没有覆盖掉z-index 值小的元素，那么请检查其包含块的层级。
6. 定位的特殊应用
注意：
- 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
- 发生相对定位后，元素依然是之前的显示模式。
- 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。
6.1 让定位元素的宽充满包含块
- 块宽想与包含块一致，可以给定位元素同时设置 left 和 right为 0。
- 高度想与包含块一致，top 和 bottom 设置为 0。
6.2 让定位元素在包含块中居中
- 方案一：
left:0;right:0;top:0;bottom:0;margin:auto;
- 方案二：
left: 50%;top: 50%;margin-left: 负的宽度一半;margin-top: 负的高度一半;
注意：该定位的元素必须设置宽高！！！
克隆方法)
)
)
