Position定位
Position定位
CSS中position属性是比较常用的元素定位方案，position常用的取值有static、relative、absolute、fixed、sticky、inherit。
static#
static属性是HTML元素的默认值，即没有定位，遵循正常的文档流对象，对于top、bottom、left、right、z-index属性的设置都被忽略。
文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
<div class="t1">static</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t1{
position: static;
}
</style>
relative#
relative是相对定位，元素的位置是相对其原本位置进行偏移，其不脱离文档流，对于top、bottom、left、right、z-index属性的设置有效，设置偏移属性后会移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块。
<div class="t2">relative</div>
<div>对比查看效果 元素原本占据空间没有变化 但relative会有偏移</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t2{
position: relative;
bottom: -10px;
}
</style>
absolute#
absolute是绝对定位，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，通常的使用方案是在外层嵌套一层relative相对定位元素作为父元素，再设置绝对定位元素的偏移将会相对于外层的relative元素进行偏移，绝对定位完全脱离文档流与文本流，不占据文档空间，对于top、bottom、left、right、z-index属性的设置有效。
<div class="t3">
<div class="t4">absolute</div>
</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t3{
height: 300px;
position: relative;
}
.t4{
position: absolute;
top: 100px;
}
</style>
fixed#
fixed是固定定位，元素的位置相对于浏览器窗口是固定位置，即使是窗口滚动元素也不会移动，注意在<iframe>中的元素使用fixed是相对于<iframe>进行定位的，<iframe>类似于在页面中创建了一个新的浏览器窗口，固定定位完全脱离文档流与文本流，不占据文档空间，对于top、bottom、left、right、z-index属性的设置有效。
<div class="t5">fixed</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t5{
position: fixed;
top: 300px;
}
</style>
sticky#
sticky是粘性定位，元素的位置是基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在position: relative与position: fixed定位之间切换，在页面显示时sticky的表现类似于position: relative，而当页面滚动超出目标区域时sticky的表现类似于position: fixed，它会固定在目标位置，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是top、right、bottom、left其中之一，必须通过指定top、right、bottom、left四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
<div class="t6">sticky</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t6{
position: sticky;
top: 0;
}
</style>
inherit#
inherit是通过继承父元素的position值来进行定位。
<div class="t7">
<div class="t8">inherit</div>
</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t7{
position: relative;
}
.t8{
position: inherit;
bottom: -10px;
}
</style>
代码示例#
<!DOCTYPE html>
<html>
<head>
<title>position</title>
<style type="text/css">
div{
border: 1px solid #eee;
margin: 5px 0;
}
.t1{
position: static;
}
.t2{
position: relative;
bottom: -10px;
}
.t3{
height: 300px;
position: relative;
}
.t4{
position: absolute;
top: 100px;
}
.t5{
position: fixed;
top: 300px;
}
.t6{
position: sticky;
top: 0;
}
.t7{
position: relative;
}
.t8{
position: inherit;
bottom: -10px;
}
</style>
</head>
<body>
<div class="t1">static</div>
<div class="t2">relative</div>
<div>对比查看效果 元素原本占据空间没有变化 但relative会有偏移</div>
<div class="t3">
<div class="t4">absolute</div>
</div>
<div class="t5">fixed</div>
<div class="t6">sticky</div>
<div class="t7">
<div class="t8">inherit</div>
</div>
<div style="height: 1000px">让浏览器出现滚动条</div>
</body>
</html>
每日一题#
https://github.com/WindrunnerMax/EveryDay
参考#
https://www.zhihu.com/question/21911352
https://www.runoob.com/css/css-positioning.html
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理