CSS 属性position有助于操纵网页中元素的位置。使用属性top、bottom、right 和 left控制其在页面上的确切位置。它们指定元素与其边缘的偏移量
属性position可用于创建浮动元素、浮动侧边栏和其他交互功能。
属性值
static: 元素根据页面的默认或正常流程定位。因此，如果我们设置 left/right/top/bottom/z-index，则不会对该元素产生任何影响。
relative: 元素的原始位置是根据正常的页面的流量就像静态值一样。但现在left/right/top/bottom/z-index 可以工作了。position属性将元素从原始位置推向该方向。
absolute: 元素完全从文档流中删除。然后，它相对于其包含块进行定位，并使用侧向偏移属性放置其边缘。绝对定位的元素可以与其他元素重叠，或者被它们重叠。
fixed: 元素的固定定位就像绝对定位一样，除了固定元素的包含块是始终是视口。这里的元素完全从文档流中删除，并且没有相对于文档任何部分的位置。
sticky: 该元素粘在具有"滚动机制"的最近定位祖先的顶部。
适用范围
所有元素。
语法
position: static | relative | absolute | fixed | sticky; CSS position: static值
当您使用position: static 属性时，元素将正常定位在文档流中。 left、right、top、bottom 和 z-index 属性将不影响该元素。这是默认值。
<html>
<head>
<style>
.normal-box {
display: inline-block;
background-color: #f2c3ee;
border: 1px solid #000000;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 100px;
}
.static-box {
display: inline-block;
position: static;
background-color: #bbedbb;
border: 1px solid #000000;
padding: 10px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a normal box.</p>
</div>
<div class="static-box">
<h2>Position: static</h2>
<p>This is a box with static position.</p>
</div>
</body>
</html> CSS position: relative值
CSS position:相对属性相对于元素在页面中的原始位置定位元素。您可以使用 left、right、top 和 Bottom 属性来移动元素，但它仍然会占用文档流中的空间。
<html>
<head>
<style>
.normal-box {
display: inline-block;
background-color: #f2c3ee;
border: 1px solid #000000;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 100px;
}
.relative-box {
display: inline-block;
position: relative;
left: 30px;
background-color: #bbedbb;
border: 1px solid #000000;
padding: 10px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a normal box.</p>
</div>
<div class="relative-box">
<h2>Position: relative</h2>
<p>This is a box with relative position.</p>
</div>
</body>
</html> CSS position: absolute值
具有position:absolute的元素将从文档流中取出并相对于其最近的定位祖先（如果有）进行定位。如果没有定位的祖先，则该元素相对于视口定位。
您可以使用 top、right、bottom 和 left 属性来指定元素相对于其包含块的位置。
<html >
<head>
<style>
.normal-box {
background-color: #f2c3ee;
border: 1px solid #333;
padding: 10px;
margin-bottom: 20px;
width: 350px;
height: 100px;
}
.absolute-box {
background-color: #bbedbb;
border: 1px solid #333;
padding: 10px;
position: relative;
width: 300px;
height: 100px;
left: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a Noraml box.</p>
<div class="absolute-box">
<h2>Position: Absolute</h2>
<p>This is a box with absolute position.</p>
</div>
</div>
</body>
</html> CSS position: fixed值
要使元素即使在用户滚动时也保持在屏幕上的同一位置，您可以设置positioin属性fixed。然后，您可以使用 left、right、top 和bottom 属性将元素定位在您想要的位置。
<html>
<head>
<style>
.position_container {
width: 400px;
height: 200px;
background-color: #f2c3ee;
overflow: auto;
padding: 5px;
}
.fixed-position {
position: fixed;
top: 15px;
left: 60px;
padding: 5px;
background-color: #bbedbb;
text-align: center;
}
</style>
</head>
<body>
<div class="position_container">
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
<p class="fixed-position">Tutorialspoint CSS Position Fixed</p>
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
</div>
</body>
</html> CSS position: sticky值
您可以将position 属性设置为Sticky 创建一个当用户滚动页面时粘在视口顶部的元素。
position:sticky 属性是position:relative 和position:fixed 属性的组合
<html>
<head>
<style>
.position_container {
width: 400px;
height: 200px;
background-color: #f2c3ee;
overflow: auto;
padding: 5px;
}
.sticky-position {
position: sticky;
top: 15px;
padding: 5px;
background-color: #bbedbb;
text-align: center;
}
</style>
</head>
<body>
<div class="position_container">
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
<p class="sticky-position">Tutorialspoint CSS Position Sticky</p>
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
<p>时光无情过，过时要珍惜，惜时是财富，财富须善用，用时要算准，算准不浪费，浪费时间最可耻，犹如谋财与害命。惜时吧，一切都在时间里成长，祝你惜时得财，得福，得生命辉煌之果</p>
</div>
</body>
</html> CSS position: 在图像中定位文本
如下例如，您可以使用position:absolute属性将文本定位在不同的方向上。文本元素位于左上角、右上角、左下角和右下角。
<html>
<head>
<style>
.container {
position: relative;
border: 2px solid #ef2c2c;
}
.center {
position: absolute;
top: 45%;
width: 100%;
text-align: center;
}
.top-left {
position: absolute;
top: 12px;
left: 30px;
}
.top-right {
position: absolute;
top: 12px;
right: 30px;
}
.bottom-left {
position: absolute;
bottom: 12px;
left: 30px;
}
.bottom-right {
position: absolute;
bottom: 12px;
right: 30px;
}
img {
width: 100%;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="/css/images/red-flower.jpg" alt="abc" width="1000px" height="350px">
<h3 class="center">Text at Centered</h3>
<h3 class="top-left">Text at Top Left</h3>
<h3 class="top-right">Text at Top Right</h3>
<h3 class="bottom-left">Text at Bottom Left</h3>
<h3 class="bottom-right">Text at Bottom Right</h3>
</div>
</body>
</html> CSS position: 相关属性
以下是与position相关的所有 CSS 属性的列表: