CSS 相对定位

1.如何设置相对定位？

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

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

  • 相对自己原来的位置

3.相对定位的特点

  1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
  2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

    3. 默认规则是：

    • 定位的元素会盖在普通元素之上。
    • 都发生定位的俩个元素，后写的元素会盖在先写的元素之水上。
  3. left不能和right一起设置，top和bottom不能一起设置。
  4. 相对定位的元素，也能继续浮动，但不推荐这样做。
  5. 想对行为的元素，也能通过margin调整位置，但不推荐这样做。

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

CSS 绝对定位

如何设置绝对定位？

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

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

  • 参考它的包含块。

    • 什么是包含块？

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

    绝对定位元素的特点：

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

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

    CSS 固定定位

    如何设置为固定定位？

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

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

    • 参考它的视口

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

    固定定位元素的特点

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

    CSS 粘性定位

    如何设置为粘性定位？

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

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

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

    粘性定位元素的特点

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

    CSS 定位的特殊应用

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

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

    让定位元素在包含块中居中
    方案一：

    1
    2
    3
    4
    5
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:0;

    方案二：

    1
    2
    3
    4
    left:50%;
    top:50;
    margin-left:负的宽度一半;
    margin-top:负的高度一半;

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