【CSS】CSS 布局——定位

在CSS（层叠样式表）中，定位是一种用来控制元素在网页上的布局位置的技术。CSS提供了不同的定位属性，用于控制元素相对于其父元素或文档视口的位置。

CSS中常用的定位属性

1. 静态定位（static）：
   这是所有元素的默认定位方式。元素按照文档流布局，不受后续定位属性的影响。无法使用 top、bottom、left、right 来控制位置。

2. 相对定位（relative）：
   使用相对定位，元素相对于其正常位置进行微调，但其占用的空间仍然保留在文档流中。可以使用 top、bottom、left、right 属性来控制元素的偏移。移动元素时不会影响其他元素的位置。

3. 绝对定位（absolute）：
   绝对定位使元素脱离文档流，相对于其最近的非静态定位的父元素进行定位。如果没有符合条件的父元素，则相对于文档视口定位。使用 top、bottom、left、right 属性来控制元素的偏移。绝对定位的元素不会占用文档流中的空间。

4. 固定定位（fixed）：
   类似于绝对定位，但是固定定位的元素会相对于文档视口进行定位，即使用户滚动页面，元素也会保持在固定位置。适用于创建悬浮导航栏或工具提示等。

5. 粘性定位（sticky）：
   它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。

“子绝父相”

“子绝父相” 是一种常用于实现网页布局的CSS布局模式，它使用相对定位和绝对定位的组合来实现灵活的布局结构。这种布局模式的中文名称源于其特点：子元素使用绝对定位脱离文档流，而父元素使用相对定位来作为参考，使得子元素相对于父元素进行定位。

这个布局模式的主要思想是：

1. 父元素（相对定位）：父元素设置为相对定位，这样子元素的定位将以父元素为基准。父元素并不会被完全从文档流中移除，它仍然占据空间。

2. 子元素（绝对定位）：子元素设置为绝对定位，这使得它从文档流中脱离出来，并且可以通过设置 top、bottom、left、right 属性来精确控制子元素在父元素内的位置。

使用子绝父相布局的典型情况包括：

• 定位导航栏：将导航栏固定在页面的某个位置，通过相对定位的父容器和绝对定位的导航元素来实现。

• 创建遮罩效果：通过相对定位的父容器和绝对定位的遮罩元素来创建覆盖在其他内容上的半透明遮罩。

• 图文混排：实现文字与图片混合排列的布局，通过子绝父相，可以精确控制图片和文字的位置关系。

• 实现定位工具提示：通过相对定位的父容器和绝对定位的提示框元素来实现当鼠标悬停在某个元素上时显示提示信息的效果。

虽然子绝父相布局模式非常灵活且功能强大，但在使用时需要注意：

• 可能会导致元素覆盖问题，需要合理控制层叠顺序（通过 z-index 属性）。
• 子元素的尺寸可能需要通过额外的手段来控制，以确保布局效果正确。
• 需要注意父元素的包裹性，以避免父元素高度坍塌等问题。

当元素开始重叠，源顺序中后定位的元素将赢得先定位的元素。z-index 影响定位元素位于z轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有 z-index 为 auto，实际上为 0。

固定定位与绝对定位的区别

绝对定位将元素固定在相对于其位置最近的祖先。（如果没有，则为初始包含它的块）而固定定位固定元素则是相对于浏览器视口本身。

总结一下，定位属性在CSS中用于控制元素的布局位置。静态定位是默认方式，相对定位微调元素的位置，绝对定位将元素从文档流中移除并相对于父元素或文档视口定位，固定定位在文档视口内固定元素，而粘性定位在滚动时将元素固定在某个位置直至达到阈值。