CSS 定位 – 绝对、相对、固定和粘性

发布日期： 2024-09-10 阅读量： 作者： 网络

css 定位 – 绝对、相对、固定和粘性

第 11 讲：css 定位 – 绝对、相对、固定和粘性

欢迎来到《从基础到辉煌》课程第十一讲。在本次讲座中，我们将探讨css定位的不同类型：相对、绝对、固定和粘性。了解定位可以让您控制元素在页面上的显示位置以及用户与内容交互时元素的行为方式。

1.了解位置属性

position 属性指定元素在文档中的位置。它可以采用以下值：

静态：默认值。元素根据正常文档流定位。
相对：元素相对于其正常位置定位。
绝对：元素相对于其最近的定位祖先或初始包含块进行定位。
固定：元素相对于浏览器窗口定位，并在滚动时保持在相同位置。
粘性：元素被视为相对元素，直到达到阈值（例如滚动位置），然后它变得固定。

2.相对定位

具有position:relative的元素相对于其原始（静态）位置定位。它保留在文档流中，这意味着其他元素仍会考虑它。

示例：使用相对定位来移动元素。

  .box {
    position: relative;
    top: 20px; /* moves the box 20px down from its normal position */
    left: 30px; /* moves the box 30px to the right */
  }

# css # 绝对定位 # 相对定位 # 固定定位 # 粘性定位

上一篇: docker端口映射到宿主机怎么操作

下一篇: nodejs和scrapy爬虫实战视频教程

CSS 定位 – 绝对、相对、固定和粘性

随便看看