CSS的定位-优快云博客

本文链接：https://blog.youkuaiyun.com/qy_hell/article/details/143373155

一、定位的基本概念

1.CSS定位是一种用于精确控制网页元素在页面上位置的技术。
2.主要通过对元素设置特定的定位属性来实现。

二、定位类型

（一）静态定位（static）

1.特点
      1.这是元素的默认定位方式。
      2.元素按照正常的文档流顺序排列，不受top、bottom、left、right属性的影响。
      3.简单来说，就是元素按照HTML文档中的书写顺序依次排列，不会出现位置的偏移。

div.static {
  position: static;
}

（二）相对定位（relative）
1.特点
      1.相对定位的元素是相对于它在标准流中的原始位置进行定位的。
      2.可以使用top、bottom、left、right属性来设置元素相对于原始位置的偏移量。
      3.相对定位的元素仍然占据原来在文档流中的空间，不会影响其他元素的布局。
2.示例代码片段

div.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

（三）绝对定位（absolute）
1.特点
      1.元素会脱离正常的文档流。
      2.它是相对于最近的非static定位的祖先元素进行定位的，如果没有这样的祖先元素，则相对于<html>元素（初始包含块）。
      3.绝对定位的元素宽度如果是内联元素会变成块级元素，可以直接设置宽高；如果本身是块级元素则宽度根据内容决定。
2.示例代码片段

div.absolute {
  position: absolute;
  top: 50px;
  right: 0;
}

（四）固定定位（fixed）
1.特点
      1.元素相对于浏览器窗口进行定位。
      2.无论页面如何滚动，固定定位的元素始终保持在固定的位置。
      3.同样会脱离文档流。
2.示例代码片段

div.fixed {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

（五）粘性定位（sticky）
1.特点
      1.粘性定位是相对定位和固定定位的混合体。
      2.元素在滚动过程中，在到达某个阈值之前，它的行为类似于相对定位，当到达阈值后，就像固定定位一样固定在某个位置。
      3.它是相对于最近的滚动祖先包含滚动视口的。
2.示例代码片段

div.sticky {
  position: sticky;
  top: 0;
}

三、z - index属性

1.作用：用于设置元素的层叠顺序。
2.规则
1.具有较高z - index值的元素会覆盖具有较低z - index值的元素。
2.默认值是0，数值越大表示层叠顺序越靠上，不带单位，可以为负数，没有明确的最大值和最小值。

四、使用定位时的注意事项

1.定位属性使用不当可能会导致页面布局混乱，所以在使用时要谨慎规划。
2.要考虑不同设备和浏览器对定位属性的兼容性，进行充分的测试。
3.定位属性可能会影响搜索引擎优化（SEO），在实际应用中需要权衡利弊。