html5之定位（static、absolute、relative、fixed）

最新推荐文章于 2024-09-12 10:14:05 发布

原创最新推荐文章于 2024-09-12 10:14:05 发布 · 5.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文详细介绍了CSS中的定位属性，包括静态定位(static)、绝对定位(absolute)、相对定位(relative)和固定定位(fixed)，并解释了每种定位方式的特点及应用。

定位属性(position) ：检索或者设置元素的定位方式（改变元素位置的属性），属性值有static、absolute、relative、fixed等。用top(上) bottom(下) left(左) right(右)属性来调整位置
1：静态定位（static），是position的默认值，默认文本流的状态，设置left right top bottom不管用。
2：绝对定位（absolute）：
a:脱离文档流、不占据空间。在这里插入图片描述
b:以其第一个定位的父级或祖辈级盒子为标准来改变位置。如果没有加定位的父元素或祖辈元素，以窗口为标准。

3: 相对定位（relative）
a: 始终占据空间，不会破坏文档流
b:以自身为标准移动

4:固定定位（fixed）
a: 以浏览器窗口为标准
b : 脱离整个文本流。不占据空间
逆战班奥利给