CSS 定位 position

最新推荐文章于 2025-09-10 10:14:21 发布

原创最新推荐文章于 2025-09-10 10:14:21 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了CSS定位中的static、fixed、relative、absolute和sticky五种方式，包括它们的工作原理、特点以及示例。static是元素的默认定位，不占据空间；fixed定位元素相对于浏览器窗口，滚动时不移动；relative定位元素相对于其正常位置移动，但保留原有空间；absolute定位相对于最近已定位父元素，不占据空间并可能与其他元素重叠；sticky定位在用户滚动超过特定阈值时，从relative变为fixed效果。

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。
    <style type="text/css">
        div.pos_abs
        {
            position:absolute;
            left:100px;
            top:10px;
            border:solid 1px;
            background-color:red;
            width:350px;
            text-align: center;
            border:solid 1px;
            color: white;
        }
    </style>

relative 定位

相对定位元素的定位是相对其正常位置。

移动相对定位元素，但它原本所占的空间不会改变。
PS: position:relative 还要设置 top/left/right/buttom，元素位置才会发生变化
只设置了{ position:relative }

设置了position 加设置移动后的位置
{ position:relative;

left:100px;

top:100px; }

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
position:absolute;
left:100px;
top:100px;

例子解析：div 相对于最近的静态位置（设置了position：static 或无设置position的会默认为static）的父元素，往右偏移和往下偏移100px。