CSS定位分析（static、fixed、relative、absolute）

发表于 | 分类于 | | 阅读次数 |
---

1.static

  • 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2.fixed

  • 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

3.relative和absolute对比分析

  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级

  • relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级

  • 二者区别：

    1. relative。定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在

      Alt w

      黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。在通过top、left对其定位后，从灰色背景层的位置可以看出其正常位置依然存在。

    2. absolute。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在

      Alt s

      可以看到，在将黄色背景层定位为absolute后，灰色背景层自动补上。

    3. relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

      Alt s

      红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素

      absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层

      Alt s

      如果其父层中都未定义absolute或relative，则其将相对body进行定位

      Alt h