是我参与「第四届青训营 」笔记创作活动的的第十一天
写在前面
以下是我学习CSS过程中的一些CSS的学习笔记记录,主要目的是用于巩固基础知识，方便日后的回看复习。本节内容主要包含CSS里的定位的一些相关知识。
概述
- 定位是网页的一种布局方式，效果举例：网页一些热点内容的封面上的“hot”等标签可以用定位很方便地做出来
定位 = 定位模式 + 边偏移- 定位模式
- 决定元素的定位方式，由position属性设置，包含：
- static：静态定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
- 边偏移
- 指的是定位的盒子移动到最终位置
- 属性值
| 属性名 | 描述 | | --- | --- | | top | 顶部偏移量，指定位元素相对于父元素上边线的举例 | | bottom | 底部偏移量，指定位元素相对于父元素下边线的举例 | | left | 左侧偏移量，指定位元素相对于父元素左边线的举例 | | right | 右侧偏移量，指定位元素相对于父元素右边线的举例 |
静态定位(static)
- 默认的定位方式，即无定位
- 按照标准流特性摆放位置，没有边偏移
相对定位(relative)
- 相对于它原本的位置进行移动
- 不脱标，即原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
绝对定位(absolute)
- 元素相对于其祖先元素进行移动位置
- 特点
- 若无祖先元素，或祖先元素没有定位，则以浏览器为准进行定位
- 若祖先元素有定位，则以最近一级的有定位的祖先元素作为基准点进行位置移动
- 绝对定位不再占有原先的位置（脱标）
固定定位(fixed)
- 指元素固定于浏览器可视区的位置，让页面滚动时其位置不改变
- 特点
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不占有原先位置
- 以浏览器的可视窗口为参照点移动元素
粘性定位(sticky)
- 场景举例：网页旁的标签、图片，在我们缩放浏览器可视窗口时，它们始终会和浏览器可视窗口的边界保持一定举例，跟着向内移动
- 特点
- 以浏览器的可视窗口为参照点移动元素
- 占有原先的位置
- 必须添加top、left、right、bottom其中一个才有效果
写在最后
以上便是我的一些学习笔记，若有不足，欢迎指出
