CSS positioning 有助于操纵网页中任何元素的位置。在本教程中，我们将学习位置属性和与之相关的值。
什么是CSS位置？
在CSS中，position属性用于通过调整网页中元素的位置来创建浮动元素、浮动侧边栏和其他交互功能。
除了 position 属性，其他属性（如 top、bottom、right 和 left）用于控制其在页面上的确切位置。它们指定元素与其边缘的偏移量。我们将在本教程中看到这些示例。
语法
以下是 css position 的可能值。
position: static | relative | absolute | fixed | sticky;
静态定位元件
使用 position： static 属性时，元素将在文档流中正常定位。left、right、top、bottom 和 z-index 属性不会影响元素。这是位置属性的默认值。
例在此示例中，我们定义了两个静态定位的 div 元素和一个相对定位的元素。看看区别。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
padding: 20px;
border: 1px solid #ccc;
}
.static-element {
position: static;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
.non-static-element {
position: relative;
top: 20px;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="static-element">
This is a static element (default position).
</div>
<div class="non-static-element">
This element is not static and is moved
20px down.
</div>
<div class="static-element">
This is another static element (default
position).
</div>
</div>
</body>
</html>
相对定位的元素
CSS position：相对属性将元素相对于其在页面中的原始位置进行定位。您可以使用 left、right、top 和 bottom 属性来移动元素，但它仍会占用文档流中的空间。
例在此示例中，我们定义了一个静态定位的 div 元素和一个相对定位的元素。看看区别。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding: 15px;
}
.container {
border: 1px solid #ccc;
}
.static-element {
position: static;
background-color: lightblue;
}
.relative-element {
position: relative;
top: 20px;
left: 30px;
background-color: lightgreen;
}
.normal-flow {
background-color: lightcoral;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="static-element">
This is a static element (default position).
</div>
<div class="relative-element">
This element is relatively positioned 20px
down and 30px right.
</div>
<div class="normal-flow">
This element is in the normal document
flow, after the relative element.
</div>
</div>
</body>
</html>
绝对定位的元素
具有 position： absolute 的元素将从文档流中取出，并相对于其最近的位置祖先（如果有）进行定位。如果没有定位的祖先，则元素将相对于视口进行定位。
您可以使用 top、right、bottom 和 left 属性来指定元素相对于其包含块的位置。
例此示例显示了绝对位置的使用
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding: 15px;
}
.container {
/* This makes container positioned ancestor */
position: relative;
width: 70%;
height: 200px;
border: 1px solid #ccc;
}
.static-element {
position: static;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
.absolute-element {
position: absolute;
/* 50px from top of nearest positioned ancestor */
top: 50px;
/* 30px from left of nearest positioned ancestor */
left: 30px;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="static-element">
This is a static element (default position).
</div>
<div class="absolute-element">
This element is absolutely positioned 30px
from top and 50px from left.
</div>
</div>
</body>
</html>
位置固定元件
在 CSS 位置：fixed 属性用于使元素即使在用户滚动时也保持在屏幕上的同一位置。然后，您可以使用 left、right、top 和 bottom 属性将元素放置在所需的位置。
例在此示例中，您可以看到向下滚动时段落元素仍然存在。
<html>
<head>
<style>
div {
width: 100%;
height: 500px;
background-color: lightgrey;
overflow: auto;
padding: 15px;
}
.fixed-position {
position: fixed;
top: 50%;
left: 20%;
padding: 5px;
background-color: white;
}
</style>
</head>
<body>
<div>
<p>You can Scroll down...</p>
<p class="fixed-position">
Tutorialspoint CSS Position Fixed
</p>
<p>
White screen will remain at 50%
height from top
</p>
</div>
</body>
</html>
粘性定位元素
在 CSS 位置：粘性属性用于使任何元素即使在用户滚动时也保持在容器的顶部。然后，您可以使用 left、right、top 和 bottom 属性将元素放置在所需的位置。
position： sticky 属性是 position： relative 和 position： fixed 属性的组合
例在此示例中，您可以看到，当您滚动时，固定移动到顶部
<html>
<head>
<style>
div {
width: 100%;
height: 500px;
background-color: lightgrey;
overflow: auto;
padding: 15px;
}
.sticky-position {
position: sticky;
top: 50%;
left: 20%;
padding: 5px;
background-color: white;
}
</style>
</head>
<body>
<div>
<p>You can Scroll down...</p>
<p class="sticky-position">
TutorialsPoint CSS Position Fixed
</p>
<p>
White screen will stick at top of
screen when you scroll down.
</p>
</div>
</body>
</html>
在图像中定位文本
在以下示例中，可以使用 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.7;
}
</style>
</head>
<body>
<div class="container">
<img src="/css/images/red-flower.jpg"
width="1000px" height="350px">
<h3 class="center">
Text at Center
</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 位置相关属性
以下是与位置相关的所有 CSS 属性的列表：
| 属性 | 描述 |
|---|---|
| bottom | 与 position 属性一起使用，以放置元素的下边缘。 |
| clip | 设置元素的剪切蒙版。 |
| left | 与 position 属性一起使用，以放置元素的左边缘。 |
| overflow | 确定溢出内容的呈现方式。 |
| right | 与 position 属性一起使用，以放置元素的右边缘。 |
| top | 设置元素的定位模型。 |
| vertical-align | 设置元素的垂直位置。 |
| z-index | 设置当前元素的呈现层。 |
