本文共 1844 字，大约阅读时间需要 6 分钟。

定位与浮动

在页面设计与开发过程中，定位和浮动是非常重要的CSS属性，用于控制元素的位置和布局。本文将详细介绍定位、相对定位、绝对定位、固定定位以及粘性定位，接着深入探讨浮动及其清除方法。

定位

页面是分层的，分为以下几层：

定位会提高元素的层次结构。当定位元素出现时，它们的层级等于自身的定位属性，但与否定位元素的层级相同。如果定位元素的层级高于非定位元素，那么前者会覆盖后者。

相对定位 (Relative)

相对定位是最常用的标架定位方式，适用于大多数布局需求。以下是其特点：

• 没有偏移量时：对元素没有影响。
• 不会改变元素自身属性：块级元素仍是块级元素，内联块元素仍为内联块。
• 不会脱离文档流：浮动元素会脱离文档流，但相对定位元素会留下原本位置的空白区域。

相对定位的特点是：元素会根据自身在无偏移情况下的位置进行调整。

绝对定位 (Absolute)

绝对定位允许元素完全脱离文档流，与常规布局无关。以下是其关键点：

• 无偏移时：对元素没有影响。
• 内联元素支持固定宽高：绝对定位的内联元素可以设宽高。
• 完全脱离文档流：与浮动不同，绝对定位的元素不会压缩父级内容。

最重要的是，绝对定位的元素如果存在定位父元素（即父级拥有一位移的定位），则会相对于定位父元素的位置进行偏移。如果没有定位父元素，则相对整个文档（document）的位置进行偏移。

绝对定位的层次显然高于浮动。

固定定位 (Fixed)

固定定位与绝对定位类似，但其元素的定位依据是相对于整个文档（document），而不是某个定位父元素。

固定的特点是：不论窗口被滚动与否，固定定位的元素都会固定在页面的特定位置。与绝对定位不同，固定定位不考虑父级的位移。

粘性定位 Sticky

粘性定位是一种较为新颖的定位方式，主要用于页面滚动时保持元素在视口内。

• 使用场景：常用于页眉或页脚等内容本来就在页面中间的部分。
• 特点：当用户滚动时，该元素会以指定固定位置吸附到视口内。

然而，粘性定位在浏览器兼容性上存在一定问题，建议在实际应用中谨慎使用，并配合JavaScript来克服兼容性问题。

z-index

z-index用于控制元素的层级优先级。其默认值均为0，数值越大，层级越高。要使用z-index，必须将该属性设置给支持定位的元素。

浮动 (Float)

浮动是现代网页设计中的重要技术，主要用于处理内联块元素的空白问题。以下是浮动的由来和工作原理：

浮动的应用场景

同级元素的浮动状态必须统一，否则可能会引发排版问题：如左边浮动右边不浮动，就会导致右边元素跑到左边，在IE浏览器中可能无法正常显示。

清浮动 (ClearFloat)

为了避免浮动元素带来的排版问题，需要对父级元素进行清除浮动。以下是常见方法：

清浮动类的典型实现方式是：

.clear {
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
}

清浮动的正确应用可以防止浮动元素对页面布局造成破坏。

通过以上学习，你应该能够更好地理解和掌握定位与浮动的原理及其应用。