css学习笔记8（定位）

css学习笔记8（定位）

• • • • 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.定位的特殊应用

1.相对定位

1.1 如何设置相对定位？

• 给元素设置position:relative 即可实现相对定位。
• 可以使用left、right、top、bottom 四个属性调整位置。

1.2 相对定位的参考点在哪里？

• 相对自己原来的位置

1.3 相对定位的特点：

1. 不会脱离文档流，元素位置的变化只是视觉效果上的变化，不会对其他元素产生任何影响。

2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

   默认规则是：

   • 定位的元素会盖在普通元素之上。
   • 都发生定位的两个元素，后写的元素会盖在先写的元素之上。

3. left不能和right一起设置，top和bottom不能一起设置。

4. 相对定位的元素，也能继续浮动，但不推荐这样做。

5. 相对定位的元素，也能通过margin调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位会与绝对定位配合使用。

2.绝对定位

2.1 如何设置绝对定位？

• 给元素设置position:absolute 即可实现绝对定位。
• 可以使用left、right、top、bottom 四个属性调整位置。

2.2 绝对定位的参考点在哪里？

• 参考它的包含块。

  什么是包含块？

  1. 对于没有脱离文档流的元素：父元素就是包含块；
  2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

2.3 绝对定位元素的特点？

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left不能和right一起设置，top和bottom不能一起设置。
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4. 绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

何为定位元素？——默认宽、高都被内容所撑开，且能自由设置宽高。

3.固定定位

3.1 如何设置固定定位？

• 给元素设置position:fixed 即可实现固定定位。
• 可以使用left、right、top、bottom 四个属性调整位置。

3.2 固定定位的参考点在哪里？

• 参考它的视口。

  什么是视口？——对于PC浏览器来说，视口就是我们看网页的那扇“窗户”。

3.3 固定定位元素的特点

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left不能和right一起设置，top和bottom不能一起设置。
3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
4. 固定定位的元素，也能通过margin调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

4.粘性定位

4.1 如何设置粘性定位？

• 给元素设置position:sticky 即可实现粘性定位。
• 可以使用left、right、top、bottom 四个属性调整位置，不过最常用的是top值。

4.2 粘性定位的参考点在哪里？

• 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

4.3 粘性定位元素的特点

• 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
• 最常用的是top值。
• 粘性定位和浮动可以同时设置，但不推荐这样做。
• 粘性定位的元素，也能通过margin调整位置，但不推荐这样做。

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

5.定位层级

1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2. 如果位置发生重叠，默认情况是：后面的元素会显示在前面元素之上。
3. 可以通过css属性z-index 调整元素的显示层级。
4. z-index 的属性值是数字，没有单位，值越大显示层级越高。
5. 只有定位的元素设置z-index 才有效。
6. 如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。

6.定位的特殊应用

注意：

1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
2. 发生相对定位后，元素依然是之前的显示模式。
3. 以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

1. 宽度想与包含块一致，可以给定位元素同时设置left和right为0。
2. 高度想与包含块一致，可以给定位元素同时设置top和bottom为0。

让定位元素在包含块中居中

• 方案一

  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  

• 方案二

  left: 50%;
  top: 50%;
  margin-left: 负的宽度一半;
  margin-top: 负的高度一半;
  

注意：该定位的元素必须设置宽高！