relative相对于谁定位_CSS3中absolute、relative、fixed定位详解

墨蓝 2023-01-12 10:19 157阅读 0赞

**点击“前端全栈之家”**

**关注我们**

**01**

定位显示

在CSS中可以通过postion属性定义元素定位显示，语法如下：

postion:  static|relative|absolute|fixed

1. static: 表示不定位，元素遵循HTML默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。

2. absolute: 表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父定位包含框进行绝对定位。如果不存在这样的定位包含框，则相对于浏览器窗口，而其层叠顺序通过z-index属性来定义。

3. fixed:表示固定定位，与absolute定位类型类似，但它的定位包含框是视图本身，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

4. relative: 表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档流中偏移位置。相对定位完成的过程是首先按static方式生成一个元素，然后移动这个元素，移动方向和幅度由left、right、top、bottom属性确定，元素的形状和偏移前的位置保留不动。

注意：

a. 与浮动元素一样，绝对定位元素以块状元素显示，它会为所有子元素建立一个定位包含框，所有被包含元素都以定位包含框为参照物进行定位，或在其内部浮动和流动。

b. 偏移量都是用left、right、top、bottom来设置，可以设置为像素值、百分比(参考元素的border以内的宽度)、负值、及特定值(center,top等)；还有都可以用z-index属性定义层叠关系。

**02**

示例

1. absolute 示例

`class="relative">This div element has position: relative; <div class="absolute">This div element has position: absolute; div></div>`

`效果图`

`2. relative示例`

`class="relative">This div element has position: relative;div>`

`效果图`

`3. fixed示例`