图解CSS定位

关注

原创最新推荐文章于 2025-09-03 13:36:23 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚... 阅读详情

1 前言

1.1 定位的背景

在CSS中，元素放置规则分为以下三种：

普通文档流：元素按照从上至下，从左至右的顺序排列，但元素又分行内元素和块级元素，其排列方式有所不同：
- 行内元素：水平排列，直到水平方向占满一行后再另起一行排列。
- 块级元素：垂直排列，每一个块级元素都会独自占用一行。
浮动流：设置浮动的元素会向左或向右浮动，直到碰到父级元素或其他浮动的元素，需要注意的是，设置浮动的元素只是半脱离文档流。
脱离文档的定位流：当定位设置为absolute绝对定位或fixed固定定位时，元素会完全脱离文档流，元素的位置就是定位时设置的位置，其布局不会受其他元素的影响，也不会影响到其他元素。

1.2 定位简介

定位就是让元素改变普通文档流行为的一种方式，定位在CSS中的关键字为position，它共有五种取值：

static（默认值）：静态定位，可以理解为没有定位；
relative：相对定位；
absolute：绝对定位；
fixed：固定定位；
sticky：粘性定位。

使用方法如下：

.box {
  position: static | relative | absolute | fixed | sticky;
}

2 阅读本文需要了解的内容

2.1 方位属性

元素在设置定位后，需要给其设置方位属性（top、bottom、left、right）用于指定元素定位位置：

在这里插入图片描述

由于top和bottom、left和right属于相互矛盾的两对属性，所以在同时设置这类属性后，top和left的优先级较高，正如上图中top和left箭头用实线表示，而right和bottom箭头用虚线表示。

2.2 层叠顺序

为什么给元素设置定位属性后，元素会覆盖到其他非定位元素的上方？这是因为当元素设置定位属性后，其z-index属性默认为auto，根据层叠顺序，z-index: auto的元素的优先级高于block块级元素，所以定位元素会覆盖在其他非定位元素的上方。

拓展阅读：CSS层叠上下文、层叠顺序和层叠等级

2.3 文中的代码示例

文中示例的公共代码如下：

<div class="container">
  <div class="box red"></div>
  <div class="box yellow"></div>
  <div class="box green"></div>
</div>

公共CSS样式如下：

.container {
  width: 100%;
  height: 800px;
  background-color: skyblue;
  position: relative;
}

.box {
  height: 100px;
  display: inline-block;
}

.red {
  width: 100px;
  background-color: red;
}

.yellow {
  width: 200px;
  background-color: yellow;
}

.green {
  width: 150px;
  background-color: green;
}

页面效果如下：

在这里插入图片描述

文中的示例都是针对于yellow，所以例子中给出的主要代码都是关于yellow的CSS代码。

3 五种定位方式详解

3.1 `static`静态定位

若不给元素添加定位属性，则静态定位为元素的默认定位属性，即元素遵循普通文档流的规则排列，代码如下：

position: static;

3.2 `relative`相对定位

相对定位有如下特点：

相对定位参照的对象是元素原来的位置；
相对定位元素不脱离普通文档流，元素在普通文档流中的原来位置依然保留，并且在其他普通文档流中的元素看来，这个元素依然在原来的位置存在。

如下示例，给yellow添加相对定位并距离顶部100px后，yellow移动到了预期位置，并且其原来的位置依然在普通文档流中保留，因为green并没有因为yellow“离开”了原来的位置而补位上去：

在这里插入图片描述

这个例子的主要代码如下：

.yellow {
  position: relative;
  top: 100px;
  width: 200px;
  background-color: yellow;
}

3.3 `absolute`绝对定位

绝对定位有如下特点：

绝对定位参照的对象是最近已经定位的父元素，如果没有已经定位的父元素，那么参照对象时根元素html；
绝对定位元素脱离普通文档流，元素不再占有原来的位置，也不会对其他普通文档流元素造成影响。

如下示例，在给yellow添加绝对定位并距离顶部50px、距离左侧50px，yellow移动到了预期位置，可以发现其原来的位置没有被保留，yellow“离开”后，原来的位置被green补位上去了。

在这里插入图片描述

这个例子的主要代码如下：

.yellow {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  background-color: yellow;
}

3.4 `fixed`固定定位

固定定位有如下特点：

固定定位元素参照的对象是浏览器窗口，若元素设置了固定定位，那么其位置即使窗口发生滚动，也不会变化，像钉在屏幕上一样；
固定定位元素脱离普通文档流。

如下示例，设置父元素高度为2000px，这样页面就出现了滚动条，将yellow设置为固定定位，并定位到屏幕正中间，当滚动条在最上方时，可以看到red和green，当滚动条到最底部时，red和green就看不到了，但是yellow依然还在页面上，这就是固定定位：

.yellow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  background-color: yellow;
}

在这里插入图片描述

3.5 `sticky`粘性定位

粘性定位有如下特点：

粘性定位参照的对象是浏览器窗口（固定定位的特点）；
粘性定位不脱离普通文档流（相对定位的特点）。

粘性定位非常的特殊，区别与其它几种定位，粘性定位的元素是依赖窗口的滚动的，随之窗口的滚动，粘性定位元素会在relative相对定位与fixed固定定位之间转换：

当粘性定位元素的原来位置全部在窗口内时，此时元素表现为relative相对定位；
当粘性定位元素的原来位置部分或全部在窗口外时，此时元素表现为fixed固定定位。

如下示例，设置父元素高度为2000px，这样页面就出现了滚动条，将yellow设置为粘性定位，当滚动条在最上方时，yellow的原位置全部在窗口内，此时元素表现为relative相对定位，并且此时也可以看到red和green，当滚动条到最底部时，这时yellow的原位置已经全部不在窗口内，此时元素表现为fixed固定定位，red和green就看不到了，但是yellow依然还在页面上，这就是粘性定位：

在这里插入图片描述

注意：文字和图片其实很难完全表达出粘性定位的特点，在页面滚动时，元素原来的位置在窗口内的变化过程，最能反应粘性布局的特点，推荐读者访问页面sticky demo在线体验一下。

这个例子的主要代码如下：

.yellow {
  position: sticky;
  top: 0;
  left: 0;
  width: 200px;
  background-color: yellow;
}

4 总结

学习定位需要重点关注以下两点：

每种定位参照的对象是什么？
定位是否脱离普通文档流？

各个定位的特点如下表：

定位方式	是否脱离普通文档流	参照对象
`static`静态定位（默认）	否	-
`relative`相对定位	否	元素原来的位置
`absolute`绝对定位	是	已定位的父级元素
`fixed`固定定位	是	浏览器窗口
`sticky`粘性定位	否	浏览器窗口