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 禁止元素环绕右浮动元素。

清除两者

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

麦宜云
Ewan Mak 的最新帖子 (查看全部)