CSS 定位属性

探索以下主题：

1. 场所监管
2. 对应定位
3. 精确定位
4. 不变的定位
5. 附着定位
6. 控制位置和属性
7. 浮动设置
8. 澄清设置

位置属性决定元素在页面上的位置。一旦确定了元素的位置，就可以调整顶部、底部、左侧和右侧属性。

场所监管

每个元素默认都有一个固定位置，因此元素将保持 document 流。具有固定定位的元素按其堆叠的顺序显示。如果不添加样式，它们不会重叠，并且各个元素不会拥有不同的默认原则。将元素定义为固定的唯一动机是消除应用的定位。

对应定位

配置为相应的元素相对于其典型位置放置。未包含其他放置属性（顶部、左侧、底部或右侧）的相应设置不会改变。这是因为它相对于自身而言就像您将其保持为固定一样。定义相应元素的顶部、右侧、底部和左侧属性会使其偏离其正常位置。不同的内容不会适应元素留下的任何间隙。

具有相应定位的元素可以与其他元素重叠，而不会影响其位置或妨碍标准 document 流。

当您在元素上使用相应的位置时，还会发生其他一些事情：

1. 它启动该元素上的 z 轴的使用。这不适用于固定元素。即使您没有设置 z 轴值，此元素仍将出现在与其交互的任何其他固定元素之上。任何未指定为固定的元素都可以使用 z 轴。 
2. 它限制了完全定位的子元素。任何充当相应元素子元素的元素，或任何不同于固定的位置，都可以在该元素内精确定位。 

扩展您对应用 z 轴值的理解。

精确定位

要从标准 document 流中置换元素，精确放置是一个不错的选择。精确元素的位置不受其他元素的影响，也不会影响其他元素的放置。 

默认情况下，元素的位置与主体元素相关，但如果父元素被指定为固定以外的任何内容，则可以将任何精确元素定位在元素内。

利用位置属性顶部、左侧、底部和右侧来确定位置 - 这些值将相对于最近的父元素，其配置与固定不同。

不变的定位

不变的元素相对于视口或浏览器窗口放置。

在页面滚动时，不变的元素会保持固定的位置。这种定位选择通常用于稳定的导航。

附着定位

附加元素将根据查看者的滚动位置在相应和不变的位置之间交换。

附加元素与 document 流相关，直到达到定义的滚动级别。此时，它将切换到其直接父元素中不变元素的行为。一旦附加元素到达其父元素的底部，它将停止滚动。

您需要为顶部、底部、左侧或右侧指定至少一个位置值，以使附加定位能够正常工作。如果任何父元素具有已建立的高度或溢出指定为隐藏、滚动或自动，则附加位置可能无法准确运行。

有些浏览器不支持附加定位。 检查哪些浏览器支持附加位置.

展示位置控制和值

对于对应、精确、不变和附加的位置属性，您可以在样式面板中使用以下控件：

• 展示位置控制
• 相关性指标
• Z 轴值字段

展示位置控制

对于具有精确和不变位置的元素，您会遇到预设，使您能够根据相关性指示器中指示的元素定位元素。

您可以选择下列任意预设位置：

• 左上角：指定值如下：上：0px 和左：0px
• 右上：表示值如下：上：0px 和右：0px
• 左下角：设置值为底部：0px 和左侧：0px
• 右下角：配置值为底部：0px 和右侧：0px
• 左：分配如下值：上：0px、左：0px、下：0px
• 右：分配如下值：上：0px、右：0px、下：0px
• 顶部：设置值，如顶部：0px、左侧：0px、右侧：0px
• 底部：将值定义为底部：0px、左侧：0px 和右侧：0px
• 完整：指定诸如顶部：0px、底部：0px、左侧：0px 和右侧：0px 的值（覆盖整个相对父级或主体）

手动控制允许您更改预设或切换到每侧（例如顶部、底部、左侧和右侧）的自动值。您可以通过操纵控件或点击它来选择预设值或输入自定义值，从而调整每侧的值。

• 顶部：增加它会将元素从顶部向下推
• 左：增加它将元素从左侧移向右侧
• 右：增加它将元素从右侧移向左侧
• 底部：增加它将元素从底部向上移动

对其中任何一个使用负值都可能使其向相反方向移动，并可能使其超出父元素的边界。

定位指示器

定位指示器显示您选择的项目相对于哪个元素定位。

请记住，设置为 相对的 定位是相对于自身定位的。

设置为绝对定位的元素相对于父元素进行定位。默认情况下，这可能是 body 元素。如果要将元素绝对定位在特定父元素内，请将该前任元素的位置修改为除静态之外的任何位置。

A 固定的 元素相对于页面主体定位，即使在滚动页面时也保持固定

粘性元素相对于其直接父元素进行定位。有时，这将是页面主体。

层索引

层索引表示元素在延伸到计算机屏幕内外的理论 z 轴上的位置。最初，元素具有自动层索引，页面底部的元素将堆叠在它们上方的元素之上，而右侧的元素将堆叠在左侧的元素之上。静态元素始终堆叠在定位元素下方，并设置相对、绝对、固定或粘性位置。

定位元素可能会在自然 document 流中与其他元素重叠，因此您可以调整任何定位元素的层索引值以修改其默认堆叠顺序。较高的值堆叠在较低的值之上。层索引值的范围可以从 0 到 2147483647。允许使用负值，但使用它们可能会导致元素可见性受损，因为您的元素可能会在大多数其他元素下方呈现。

嵌套元素上的层索引

当图层索引设置为自动时，元素的排列顺序与其父元素的排列顺序一致。这些元素可以相对于父元素堆叠，但对于其他元素，它们将保持在父元素的 z 轴范围内。例如，如果元素 A 的图层索引高于元素 B，则无论元素 B 的图层索引值有多高，元素 B 的子元素都永远无法超过元素 A。

浮动配置

要允许文本环绕元素，请将元素向左或向右浮动。要实现此目的，请在样式面板中激活向左浮动或向右浮动属性。

您可以让元素向左或向右浮动，或者不浮动，但仍保持其在页面流中的默认位置。

浮动多个元素会将它们并排排列。此布局方法用于各种原生 Webflow 元素，如集合列表和导航链接。或者，您可以实现这些布局任务 使用弹性盒子.

浮动 无

None 是大多数元素的标准设置，可将元素定位在常规 document 流中。如果元素继承了浮动设置（例如从较大的断点继承的），则可以通过将浮动设置为 none 来恢复其在页面上的自然位置。

向左飘浮

将元素浮动到左侧会使其在父元素内左对齐。这还会使任何元素与元素右侧或下方对齐，直接与元素相邻，除非应用了明确设置。

右浮动

将元素向右浮动会使其在父元素内向右对齐。除非设置了 clear 属性，否则浮动元素正下方的任何长段落或富文本都将环绕该元素。

清除配置

在元素上启用 clear 可确保它不会环绕浮动元素。此设置可应用于浮动元素下方堆叠的任何元素，但不能应用于浮动元素本身。

设置了 clear 属性的元素不会像浮动元素希望的那样向上移动到浮动元素的旁边，而是会向下移动到浮动元素的旁边

清除无

“无清除”是大多数元素的默认设置。设置为“无清除”的元素将容纳在 document 流中紧邻其上方的任何浮动元素旁边或环绕其周围。

如果元素继承了清除设置（例如来自较大的断点），则可以通过将清除设置为无来清除任何现行的清除设置。

清除左侧

Clear Left 可防止元素环绕左浮动元素。

清除右侧

Clear Right 禁止元素环绕右浮动元素。

清除两者

清除两者可防止元素环绕任何浮动元素，无论它是向左浮动还是向右浮动。