第七天笔记，CSS属性（定位）

最新推荐文章于 2025-12-20 10:45:52 发布

原创最新推荐文章于 2025-12-20 10:45:52 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3

本文深入探讨了CSS中的定位属性，包括static、relative、absolute、fixed以及新增的sticky定位。static是默认定位，遵循HTML流；relative允许元素相对于其正常位置偏移；absolute定位脱离文档流，依据最近定位父元素或浏览器；fixed定位基于视口，常用于创建吸顶效果；而sticky定位则是结合relative和fixed特性，当元素进入视口时变为固定定位。理解这些定位方式对于网页布局至关重要。

定位

position 定位属性，检索对象的定位方式；

1、static：默认值，无特殊定位，对象遵循HTML原则； 2、absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据《浏览器》进行定位，而其层叠通过z-index属性定义 3、relative ：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义. 4、fixed：(固定定位)，类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流；

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式: 用于指定一个元素在文档中的定位方式。 边偏移则决定了该元素的最终位置。
边偏移: 边偏移就是定位的盒子移动到最终位置。有top. bottom. left 和right 4个属性。

父相子绝

position:sticky：粘性定位吸顶