CSS定位

最新推荐文章于 2026-01-05 20:42:35 发布

原创最新推荐文章于 2026-01-05 20:42:35 发布 · 247 阅读

CC 4.0 BY-SA版权

文章标签：

14 篇文章

订阅专栏

本文详细介绍了CSS中的四种定位方式：static、relative、absolute和fixed。解释了每种定位方式的特点及使用场景，并通过实例展示了如何应用这些定位方式来实现网页布局。

css-定位

css的定位有以下几种：

1.static定位
这个是默认的方式。
特别说明：对static而言，left和top是没有用的。

2.relative定位（相对定位）
元素框偏移某个距离（left和top）。元素本身形状不变化，它原本所占的空间仍保留，从这一角度看，好像该元素仍然在文档流/标准流中一样。
特别说明：1.relative的参照点是它原来的位置进行移动。

案例：
这里写图片描述
改为：

代码：

<div class="s1">内容一</div>
<div  id="special" class="s1">内容二</div>
<div class="s1"> 内容三</div>
<div class="s1">内容四</div>

在css中对内容二的指定：

#special{
    position:relative;/*相对定位，参照物为原来位置，原来位置保持*/
    left:40px;
    top:100px;
}

3.绝对定位（absolute）
元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间。

案例：
这里写图片描述
改为：

css中对内容二的指定：

#special{
    position:absolute;/*绝对定位，参照物为离自己最近的非标准流盒子而言的*/
    left:40px;
    top:100px;
}

特别说明：absolute定位是对离自己最近的那个非标准流盒子而言的。
案例：
这里写图片描述
代码：

<div class="s1">内容一</div>
<div class="s1"> 内容三</div>
<div class="s1">内容四</div>
<div class="s2"><div  id="special" class="s1">内容二</div>abcd</div>

4.fixed定位：
元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身（body）。