CSS4种定位模式 (position)的特性详解
CSS定位position详解
定位是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移
边偏移
CSS定位的盒子,是通过边偏移来移动位置的。
在 CSS 中,通过 top
、bottom
、left
和 right
属性定义元素的边偏移:(方位名词)
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top: 80px | 顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom | bottom: 80px | 底部偏移量,定义元素相对于其父元素下边线的距离。 |
left | left: 80px | 左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right | right: 80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
定位的盒子有边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。
定位模式 (position)
在 CSS 中,通过 position
属性定义元素的定位模式,语法如下:
选择器 { position: 属性值; }
定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
静态定位(static)
- 静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none, 不要定位的时候用。
- 静态定位按照标准流特性摆放位置,它没有边偏移。
- 静态定位在布局时是几乎不用的 。
相对定位(relative)
- 相对定位是元素相对于它原来在标准流中的位置来说的。
相对定位的特点:
- 相对于自己原来在标准流中的位置来移动。
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
绝对定位(absolute)
绝对定位是元素以带有定位的父级元素来移动位置 。
-
完全脱离标准流 —— 完全不占位置;
-
如果父元素没有定位,则以浏览器为准定位(Document 文档)。
-
父元素要有定位
- 将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
绝对定位的特点:
- 绝对是以带有定位的父级元素来移动位置,如果父级都没有定位,则以浏览器文档为准移动位置。
- 不保留原来的位置,是完全脱离标准流的。
- 要和带有定位的父级搭配使用。
布局定位 —— 子绝父相
绝对定位,要和带有定位的父级搭配使用,那么父级要用什么定位呢?
子绝父相 —— 子级是绝对定位,父级要用相对定位。
子级元素使用绝对定位,完全脱离标准流 ,不占据位置。
父级元素使用相对定位,占据位置,按照正常标准流显示,不会影响后面元素的正常显示,相对定位不脱标,后续盒子仍然以标准流的方式对待它。
固定定位(fixed)
固定定位是绝对定位的一种特殊形式。
- 完全脱离标准流 —— 完全不占位置;
- 相对于浏览器的可视窗口 ——
浏览器可视窗口 + 边偏移属性
来设置元素的位置;- 跟父元素没有任何关系;单独使用的
- 可以把一个盒子固定在浏览器可视窗口的某个位置,不会随滚动条一起滚动。
提示:IE 6 等低版本浏览器不支持固定定位。
@小白向前冲: 但是一个网页在一个文件夹里面,然后里面又有html css js这些该怎么做啊
普通网友: 好文!我也写了一篇获取【大厂面试真题解析、核心开发学习笔记、最新全套讲解视频、实战项目源码讲义、学习路线简历模板】的文章
CSDN-Ada助手: 推荐 Java 技能树:https://edu.csdn.net/skill/java?utm_source=AI_act_java
m0_67165888: 他有没有没解决我不知道,反正我解决了
Amazing_mei: 非常实用,感谢博主