回到所有的课程
课程库

CSS定位属性

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

这个视频的特点是一个旧的UI。更新版本即将发布!

在这节课中:

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

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

静态定位

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

相对定位

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

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

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

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

了解更多关于应用z-索引值

绝对定位

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

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

使用定位属性top、left、bottom和right来设置位置——这些值将相对于下一个父元素的设置,而不是static。

固定定位

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

当您向下滚动页面时,固定元素会固定在它们的位置上。这个位置设置通常用于固定导航。

粘性的定位

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

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

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

有些浏览器不支持粘性定位。看看哪些浏览器支持“位置:粘性”

位置控件和值

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

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

定位控制

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

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

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

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

  • 顶部:增加它使元素从顶部向下推
  • 左:增加它,将元素从左边推到右边
  • 右:增加它,将元素从右边推到左边
  • 底部:增加它将元素从底部往上推

为其中任何一个添加负值都将使其向相反的方向移动,并可能将其推到父元素的边界之外。

相对论指示器

相关性指示器显示你选择的元素相对于哪个元素。

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

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

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

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

z - index

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

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

嵌套元素的z -索引

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

浮动设置

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

您可以将一个元素浮动到左侧或右侧,或不浮动,以保持它在页面流中的自然位置。

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

没有浮动

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

左浮动

将元素向左浮动将使其位于父元素的左侧。这个设置也会将任何元素堆叠到右边或下面,直接挨着元素,除非它应用了一个明确的设置。

浮动对吧

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

明确的设置

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

设置了clear属性的元素不会像浮动所希望的那样向上移动到靠近浮动的位置,而是向下移动到超过浮动的位置

清楚没有

清除none是大多数元素的默认设置。设置为clear non的元素将会堆叠在文档流中直接位于其上方的任何浮动元素的旁边或周围。

如果一个元素继承了一个清除设置,例如从一个较大的断点,您可以通过将清除设置设置为none来清除任何清除设置。

清晰的离开

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

明确的对吧

右清除防止元素环绕向右浮动的元素。

明确两

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


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