菜鸟-创作你的创作

HTML5 定位大全之相对定位、绝对定位和固定定位

lichongyang

下面给你一份 最系统、最清晰、可直接用于前端开发的《HTML5 定位大全：相对定位 / 绝对定位 / 固定定位》解析》。包含所有概念、规则、实例、常见坑、移动端适配技巧，以及可运行示例。

🌐 定位（position）是什么？

在 HTML5 / CSS3 开发中，position 用于改变元素在页面中的“定位方式”。主要包括：

本文重点讲你要的 relative / absolute / fixed 三者区别与使用。

🟥 一、position: relative（相对定位）

✔ 1. 基本定义

相对定位是相对元素自身位置进行偏移。

position: relative;
top: 10px;
left: 20px;

元素 仍然占据原本空间，视觉上移动，但布局不改变。

✔ 2. 适用场景

✔ 3. 示例

<div style="position: relative; top: 10px; left: 20px;">
    我往右移动了 20px，往下移动了 10px
</div>

元素看起来移动了，但原来的占位空间还在。

🟦 二、position: absolute（绝对定位）

✔ 1. 基本定义

absolute 元素 脱离文档流（不占空间），位置基于 最近的已定位祖先元素（relative/absolute/fixed/sticky）。

如果父级都没定位，则相对 浏览器视口。

✔ 2. 使用方法

position: absolute;
top: 20px;
right: 10px;

✔ 3. 示例（带定位参考）

<div style="position: relative; width: 300px; height: 200px; background:#eee;">
    <div style="
        position:absolute; 
        right:10px; 
        bottom:10px; 
        background:red; 
        color:#fff;
    ">
        右下角绝对定位
    </div>
</div>

绝对定位常用于：

🟩 三、position: fixed（固定定位）

✔ 1. 基本定义

fixed 相对视口（浏览器窗口）固定位置
无论页面滚动多少，位置不变。

✔ 2. 示例

<div style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background: #333;
    color: #fff;
">
    固定在右下角
</div>

常用于：

⭐ 对比总结（最重要的区别）

特性relativeabsolutefixed
占位置？占不占不占
参考定位点自己原位置最近定位祖先浏览器视口
随滚动变化？会会不会
常用场景微调样式浮动元素悬浮按钮

一句话总结：
relative 只是“轻移位”，absolute 是“精确定位”，fixed 是“跟随屏幕”。

🔥 四、relative + absolute 搭配使用（开发最常用）

绝对定位最常见用法就是“给父元素加 relative，给子元素 absolute”。

<div class="parent">
    <div class="child">角标</div>
</div>

<style>
.parent {
    position: relative;
    width: 120px;
    height: 120px;
    background: #ddd;
}
.child {
    position: absolute;
    top: 4px;
    right: 4px;
    background:red;
    color:#fff;
}
</style>

📱 五、移动端定位注意点

1. fixed 在 iOS 浏览器可能出现闪烁或不跟手

解决：

body {
    -webkit-overflow-scrolling: touch;
}

或者改用 position: sticky。

2. absolute 元素可能被放大缩小影响

在响应式布局中避免使用固定 px 定位，使用：

✔ 百分比
✔ vw/vh
✔ flex 代替部分布局

3. 软键盘弹出时 fixed 元素错位

移动端 APP H5 常见问题，需要使用 JS 监听页面高度变化处理。

📌 六、综合案例：返回顶部悬浮按钮（fixed）

<!DOCTYPE html>
<html>
<head>
<style>
#topBtn {
    position: fixed;
    bottom: 30px;
    right: 20px;
    background:#000;
    color:#fff;
    padding:10px;
    border-radius:50%;
    cursor:pointer;
    display:none;
}
</style>
</head>

<body>

<button id="topBtn">↑</button>

<script>
const btn = document.getElementById("topBtn");

window.addEventListener("scroll", ()=>{
    btn.style.display = window.scrollY > 200 ? "block" : "none";
});

btn.addEventListener("click", ()=> {
    window.scrollTo({top:0,behavior:'smooth'});
});
</script>

</body>
</html>

🧱 七、综合对比案例：relative + absolute + fixed

<div style="position: relative; width: 200px; height: 200px; background:#ccc;">
    <div style="position:absolute; top:10px; left:10px; background:#f00; color:#fff;">
        absolute（相对父元素）
    </div>
</div>

<div style="position:fixed; bottom:15px; left:15px; background:#000; color:#fff;">
    fixed（固定在屏幕左下）
</div>

🎉 八、常见开发坑（必须知道）

坑说明
absolute 无参考点忘记给父级加 position: relative
fixed 覆盖内容需要加 z-index
fixed 在父级 overflow: hidden 下失效fixed 只能对视口定位
iOS fixed 失效软键盘影响
relative 使用多导致布局错位不要滥用
退出移动版