前端面经-CSS篇(四）---定位

小杨升级打怪中

已于 2025-04-06 21:38:58 修改

阅读量629

点赞数 11

CC 4.0 BY-SA版权

分类专栏：前端面经-CSS 文章标签：前端 css

于 2025-04-06 21:37:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44643806/article/details/147029176

（3）、布局与层叠上下文(关于布局和层叠上下文的内容我后面的博客会讲解)

（4）、综合应用类

（5）、进阶与延伸

总结

一、CSS 定位的基本概念

在网页布局中，我们常常需要精确地控制元素在页面中的位置。CSS 定位属性就是用来实现这一目的的。它决定了元素如何在页面中排列，以及当其他元素变化时，它是否会跟随变化。

CSS 中最常见的定位方式有以下几种：

静态定位（static）
相对定位（relative）
绝对定位（absolute）
固定定位（fixed）
粘性定位（sticky）

每种定位方式都有各自的用途和特点。

二、各类定位方式详解

1. 静态定位（static）

默认状态
如果你不为元素指定 position 属性，那么它默认就是 static。
特点：
- 元素按照正常的文档流排列：块级元素一个接一个排列，内联元素从左到右排列。
- 不能使用 top、bottom、left、right 等属性对元素进行位置调整。无论元素是 static 还是任何其他 position 值，你都可以给它设置 padding 和 margin。定位方式（position）决定元素在页面中怎么“放置”或“偏移”，而**padding / margin** 决定元素自身大小、和其他元素的间距 —— 两者并不冲突。
- 注意：“元素” 指的是它在页面中所占据的整个盒子（content + padding + border），以及在文档流中的位置。也就是说，当我们没有指定 position 属性时，这个元素（包括它的内容区、内边距和边框）会按照正常文档流的规则排列。

2. 相对定位（relative）

定义：
当你为元素设置 position: relative; 后，该元素仍然会按照正常文档流排列，但你可以使用 top、bottom、left、right 属性对它进行“偏移”。
特点：
- 元素的原始位置仍然保留（占据空间），只是显示位置会发生偏移。
- 通常用来微调位置，或者为后代设置一个定位上下文，也就是说，为绝对定位的子元素提供参照点。

我相信看到这里的有些朋友会疑惑设置top和margin-top有什么区别？不是都会使得元素向下移动吗？还是relative到底形成什么样的效果

设置top和margin-top有什么区别？ 、

top 用于定位（position）

只有在元素设置了 position: relative|absolute|fixed|sticky 时，top 才会生效。
top 是相对于元素的定位上下文（或者自身原始位置）进行偏移。
如果元素是 position: static;（默认），top 无效。

margin-top 用于普通文档流的外边距

无论元素是 static 还是相对定位，都可以用 margin-top。
margin-top 会在正常文档流中推开相邻元素，增加与其它块级元素的距离。
它并不会让元素脱离当前文档流，也不一定会覆盖其他元素；只是加大空白间距

我们来看个例子？：假设我们有两个盒子，现在不设置任何样式

  <h2>1) Box A：<code>margin-top: 50px;</code></h2>
  <div class="box boxA">Box A</div>
  <h2>2) TextText ：<code>我是一个对照组</code></h2>
  <h2>3) Box B：<code>position: relative; top: 50px;</code></h2>
  <div class="box boxB">Box B</div>
  <h2>4) TextText ：<code>我是一个对照组</code></h2>

现在我们设置

 /* 1) Box A: 仅使用 margin-top */
    .boxA {
      margin-top: 50px;
    }

    /* 2) Box B: position: relative; top: 50px */
    .boxB {
      position: relative;
      top: 50px;
    }

得到的效果：