CSS - position 属性
position 属性
CSS position 属性用于指定网页中元素的定位方式。CSS 属性如 top、bottom、right 和 left 用于控制元素在网页中的精确位置。
position 属性可用于创建浮动元素、浮动侧边栏以及其他交互功能。
语法
CSS position 属性的语法如下：
position: static | relative | absolute | fixed | sticky;
可能的值
| 值 | 描述 |
|---|---|
| static | 这是默认值，元素按照页面的正常流进行定位。因此，如果设置 left/right/top/bottom/z-index，这些属性对该元素没有影响。 |
| relative | 元素的原始位置按照页面的正常流进行定位，就像 static 值一样。但现在 left/right/top/bottom/z-index 将生效。 |
| absolute | 元素完全从文档流中移除。然后，它相对于最近的已定位祖先元素进行定位。已定位元素应该是除 static 外的任何值。 |
| fixed | 元素的 fixed 定位类似于 absolute 定位，但 fixed 元素的包含块始终是视口。此处元素完全从文档流中移除，且不相对于文档的任何部分定位。 |
| sticky | 元素粘附在其最近的具有“滚动机制”的已定位祖先元素的顶部。在到达滚动位置之前，它表现为 relative，之后表现为 fixed。 |
适用元素
position 属性可应用于所有元素。
CSS position 属性使用 static 值
此示例中 div 元素的 position 属性设置为 static。left、right、top 和 bottom 属性对 div 元素没有影响。
示例
以下示例将 div 元素的 position 属性设置为 static。
<html>
<head>
<style>
.container {
display: inline-block;
background-color: #f2c3ee;
border: 1px solid #000000;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 100px;
}
.box {
display: inline-block;
position: static;
background-color: #bbedbb;
border: 1px solid #000000;
padding: 10px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<h2>Normal Box</h2>
<p>This is a normal box.</p>
</div>
<div class="box">
<h2>Position: static</h2>
<p>This is a box with static position.</p>
</div>
</body>
</html>
CSS position 属性与 relative 值
以下示例将 div 元素的 position 属性设置为 relative。这允许您设置 div 元素的 top、bottom、left 和 right 定位。
示例
在本示例中，我们使用了 position: relative; 将子元素的定位设置为 relative。
<html >
<head>
<style>
.container {
background-color: #f2c3ee;
border: 1px solid #333;
padding: 10px;
margin-bottom: 20px;
width: 350px;
height: 300px;
}
.box {
background-color: #bbedbb;
border: 1px solid #333;
padding: 10px;
position: relative;
width: 300px;
height: 100px;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Normal Box</h2>
<p>This is a Normal box.</p>
<div class="box">
<h2>Position: Absolute</h2>
<p>This is a box with absolute position.</p>
</div>
</div>
</body>
</html>
CSS position 属性与 absolute 值
您可以使用 absolute 值来设置元素相对于其最近的祖先元素的位置。
示例
在本示例中，我们使用了 position: absolute; 将子元素定位到其最近的定位容器相对的位置。
<html >
<head>
<style>
.container {
background-color: #f2c3ee;
border: 1px solid #333;
padding: 10px;
margin-bottom: 20px;
width: 350px;
height: 100px;
}
.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="container">
<h2>Normal Box</h2>
<p>This is a Normal box.</p>
<div class="box">
<h2>Position: Absolute</h2>
<p>This is a box with absolute position.</p>
</div>
</div>
</body>
</html>
CSS position 属性与 fixed 值
要使元素即使在用户滚动时也保持在屏幕上的同一位置，您可以将 position 属性设置为 fixed。然后可以使用 left、right、top 和 bottom 属性将元素定位到您想要的位置。
示例
在本示例中，我们使用了 position: fixed; 在 div 上为段落创建固定定位。
<html>
<head>
<style>
.container {
width: 400px;
height: 200px;
background-color: #f2c3ee;
overflow: auto;
padding: 5px;
}
.box {
position: fixed;
top: 15px;
left: 60px;
padding: 5px;
background-color: #bbedbb;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<p>This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.</p>
<p class="box"> CSS Position Fixed</p>
<p>CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.</p>
</div>
</body>
</html>
CSS position 属性与 sticky 值
您可以将 position 属性设置为 sticky，以创建一个元素，当用户滚动页面时，该元素会粘附在视口顶部。它是 position: relative 和 position: fixed 属性的结合。
示例
在这个示例中，我们在段落元素上应用了 position: sticky;，该元素会滚动到指定位置然后固定在原地。
<html>
<head>
<style>
.container {
width: 400px;
height: 200px;
background-color: #f2c3ee;
overflow: auto;
padding: 5px;
}
.box {
position: sticky;
top: 15px;
padding: 5px;
background-color: #bbedbb;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<p>This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.</p>
<p class="box"> CSS Position Sticky</p>
<p>CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.</p>
<p>Each version of CSS builds upon the previous ones, adding new features and refining existing capabilities to meet the evolving needs of web developers and designers. CSS is referred as just CSS now, without a version number.</p>
</div>
</body>
</html>
使用 CSS 在图像中定位文本
要将文本定位到不同方向，您可以使用 position: absolute 属性。
示例
在这个示例中，我们使用了 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/pink-flower.jpg" alt="Pink flower" 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 属性列表：
| 属性 | 描述 |
|---|---|
| bottom | 与 position 属性一起使用，用于设置元素的底部边缘位置。 |
| clip | 为元素设置裁剪遮罩。 |
| left | 与 position 属性一起使用，用于设置元素的左侧边缘位置。 |
| overflow | 确定溢出内容如何渲染。 |
| position | 为元素设置定位模型。 |
| right | 与 position 属性一起使用，用于设置元素的右侧边缘位置。 |
| top | 为元素设置定位模型。 |
| vertical-align | 设置元素的垂直定位。 |
| z-index | 设置当前元素的渲染层级。 |