回到所有的课程
课程库

CSS定位属性

自定义元素相对于自身、父元素或兄弟元素,或视口的位置。

本视频采用了旧的用户界面。更新版本即将到来!

在这节课中:

  1. 静态定位
  2. 相对定位
  3. 绝对定位
  4. 固定定位
  5. 粘性的定位
  6. 位置控件和值
  7. 浮动设置
  8. 明确的设置

position属性确定元素在页面上的位置。一旦设置了元素的位置,就可以对顶部、底部、左边和右边的属性进行调整。

静态定位

默认情况下,每个元素都有一个静态位置,因此元素将保持在文档流中。具有静态定位的元素按其堆叠的顺序出现。如果不添加样式,它们就不会重叠,不同的元素也不会有不同的默认值。将元素设置为静态的唯一原因是删除应用于它的定位。

相对定位

设置为relative的元素的定位是相对于其正常位置的。没有添加其他定位属性(上、左、下、右)的相对设置不会受到影响。这是因为它是相对于它自己的,就像你让它保持静态一样。设置一个相对元素的顶部、右侧、底部和左侧属性将使其远离正常位置。其他内容不会调整以适应元素留下的任何空白。

具有相对位置的元素可以重叠其他元素,而不会影响它们的位置或中断正常的文档流。

当你在元素上使用相对位置时,会发生另外两件事:

  1. 它引入了对该元素的z-index的使用。这不适用于静态元素。即使您没有设置z-index值,这个元素仍然会出现在与之重叠的任何其他静态元素的顶部。Z-index适用于任何未设置为静态的元素。
  2. 它限制绝对定位的子元素。作为相对元素子元素的任何元素,或者静态以外的任何位置,都可以绝对定位在该元素中。

了解更多关于应用z-index值

绝对定位

要从普通文档流中删除元素,绝对位置是一个很好的选择。绝对元素的位置不受其他元素的影响,也不影响其他元素的位置。

默认情况下,元素的位置是相对于body元素的,但是如果父元素被设置为非静态元素,则可以在元素内部定位任何绝对元素。

使用定位属性top、left、bottom和right来设置位置—这些值将相对于下一个具有非静态设置的父元素。

固定定位

固定元素相对于视口或浏览器窗口的位置。

当你向下滚动页面时,固定元素会保持固定的位置。这种位置设置通常用于固定导航。

粘性的定位

粘性元素将根据查看者的滚动位置在相对和固定位置之间交替。

粘性元素相对于文档流,直到达到定义的滚动位置。这时,它会切换到其直接父元素中的固定元素的行为。一旦粘性元素触到其父元素的底部,它将停止滚动。

您必须为顶部、底部、左侧或右侧指定至少一个位置值,以便进行粘滞定位。如果任何父元素设置了高度或溢出设置为隐藏、滚动或自动,位置粘附可能无法正常工作。

有些浏览器不支持粘性定位。查看哪些浏览器支持的位置:sticky

位置控件和值

对于相对、绝对、固定和粘性位置属性,在样式面板中有以下控件:

  • 定位控制
  • 相对论指示器
  • z - index value字段

定位控制

对于具有绝对位置和固定位置的元素,您将看到允许您相对于相对论指示器中指示的元素定位元素的预设。

您可以选择以下任一预设位置:

  • Top left:设置以下值:Top: 0px - left: 0px
  • Top right:设置以下值:Top: 0px - right: 0px
  • Bottom left:设置以下值:Bottom: 0px - left: 0px
  • Bottom right:设置以下值:Bottom: 0px - right: 0px
  • 左:设置以下值:top: 0px - Left: 0px - bottom: 0px
  • 右:设置以下值:top: 0px - Right: 0px - bottom: 0px
  • Top:设置以下值:Top: 0px - left: 0px - right: 0px
  • Bottom:设置以下值:Bottom: 0px - left: 0px - right: 0px
  • Full:设置以下值:top:0px - bottom: 0px - left: 0px - right: 0px(覆盖整个相对父或主体)

手动控件允许您覆盖顶部、底部、左侧和右侧的预设值或默认值。您可以通过拖动控件或单击控件并选择预设值或输入自定义值来更改每一侧的值。

  • 顶部:增加它,从顶部向下推元素
  • 左:增加它以将元素从左边推出,并将其移到右边
  • 右:增加它,将元素从右边推出,并将其移动到左边
  • 底部:增加它,从底部推动元素

为这些元素添加负值将使其向相反的方向移动,并可能将其推出父元素的边界。

相对论指示器

相对指示器显示所选元素相对于哪个元素的位置。

记住,元素设置为相对定位是相对于自身定位的。

设置为绝对元素的元素相对于父元素定位。默认情况下,这可能是body元素。如果您想要在特定父元素中绝对定位一个元素,请将该父元素的位置更改为任何位置,而不是静态的。

一个固定元素的位置相对于页面主体,并且即使在页面滚动时也保持不变

粘性元素的定位是相对于它的直接父元素。在某些情况下,这将是页面主体。

z - index

z指数是元素在虚拟z轴上的位置,它延伸到电脑屏幕内外。默认情况下,元素有一个自动z-index,页面底部的元素堆栈在它们上面的元素之上,而右边的元素堆栈在左边的元素之上。静态元素总是比定位元素堆栈更低,位置设置为相对、绝对、固定或粘性。

定位元素可能与自然文档流中的其他元素重叠,因此您可以更改任何定位元素的Z-index值来更改其默认的堆叠顺序。较高的值叠加在较低的值上。Z-index的值可以是0到2147483647之间的任何整数。您也可以使用负值,但是您可能会失去元素的可见性,因为您的元素将在大多数元素下面呈现。

嵌套元素的Z-index

当z-index设置为auto时,元素的堆栈顺序等于其父元素的堆栈顺序。这些元素可以相对于父元素进行堆叠,但相对于其他元素保持在父元素的z轴内。例如,如果元素A的z-index比元素B高,那么无论元素B的z-index值有多高,元素B的子元素都不可能比元素A高。

浮动设置

若要将文本环绕在元素周围,请将元素向左或向右浮动。要浮动一个元素,请在样式面板中启用左浮动或右浮动属性。

您可以将元素向左或向右浮动,也可以不浮动,使其保持在页面流中的自然位置。

浮动多个元素将它们并排堆叠。许多原生Webflow组件都使用这种布局技术,比如列、集合列表和导航链接。您还可以完成这些布局任务与flexbox

没有浮动

None是大多数元素的默认设置,它将在正常的文档流中定位元素。如果元素具有继承的浮点设置,例如从较大的断点继承的浮点设置,则可以通过将浮点设置为none恢复其在页面上的自然位置。

左浮动

将一个元素向左浮动将使它位于父元素的左侧。该设置还会将任何元素堆叠到元素的右侧或下方,紧挨着元素,除非应用了明确的设置。

浮动对吧

将一个元素向右浮动将使它在父元素中向右定位。浮动元素下方的任何长段落或富文本都将环绕该元素,除非它们有一个明确的属性集。

明确的设置

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

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

清楚没有

清除none是大多数元素的默认设置。设置为clear non的元素将与文档流中直接位于其上方的任何浮动元素一起堆叠或环绕。

如果元素具有继承的清除设置(例如来自较大的断点),则可以通过将清除设置设置为none来清除任何清除设置。

清晰的离开

清除left可防止元素环绕浮动到左侧的元素。

明确的对吧

Clear right防止元素环绕向右浮动的元素。

明确两

Clear都可以防止元素环绕任何浮动元素,无论它是向左还是向右浮动。


尝试Webflow——它是免费的
Baidu
map