Css 简明教程
CSS - Positioning
CSS Positioning 有助于操作网页中任何元素的位置。在本教程中，我们将学习与位置属性以及与其关联的值。
CSS Positioning helps to manipulate position of any element in a web page. In this tutorial we will learn position property and values associated with it.
What is CSS Position?
在 CSS 中， * position* 属性用于创建浮动元素、浮动侧边栏，以及调整网页中元素的位置来实现其他交互式功能。
In CSS position property is used to create floating elements, floating sidebar, and other interactive features by adjusting position of elements in webpage.
Syntax
以下是 css 位置的可能值。
Following are possible values for css position.
position: static | relative | absolute | fixed | sticky;Static Positioned Element
当使用 position: static 属性时，元素将在文档流中正常定位。left、right、top、bottom 和 z-index 属性不会影响元素。这是 position 属性的默认值。
When you use the position: static property, the element will be positioned normally in the document flow. The left, right, top, bottom, and z-index properties will not affect the element. This is the default value for position property.
Example
在本示例中，我们定义了两个静态定位 div 元素和一个相对定位元素。查看区别。
In this example we defined two static positioned div elements and one relative positioned element. See the difference.
<!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>Relative Positioned Elements
CSS position: relative 属性相对于元素在页面中的原始位置对其进行定位。你可以使用 left、right、top 和 bottom 属性来移动元素，但它仍会在文档流中占用空间。
CSS position: relative property positions the elements relative to their original position in the page. You can use the left, right, top, and bottom properties to move the element around, but it will still take up space in the document flow.
Example
在本示例中，我们定义了一个静态定位 div 元素和一个相对定位元素。查看区别。
In this example we defined one static positioned div element and one relative positioned element. See the difference.
<!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>Absolutely Positioned Elements
具有 position: absolute 的元素会脱离文档流，并相对于其最近的定位祖先（如果有）进行定位。如果没有定位祖先，则元素相对于视区进行定位。
An element with position: absolute is taken out of the document flow and positioned relative to its nearest positioned ancestor (if any). If there is no positioned ancestor, then the element is positioned relative to the viewport.
你可以使用 top、right、bottom 和 left 属性来指定元素相对于其包含块的位置。
You can use top, right, bottom, and left properties to specify the position of the element relative to its containing block.
Example
此示例显示了绝对位置的使用。
This example show use of position absolute
<!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>Position Fixed Element
在 CSS 中， position: fixed 属性用于使元素停留在屏幕上的同一位置，即使用户滚动页面。然后，可以使用 left、right、top 和 bottom 属性将元素放置在所需位置。
In CSS position: fixed property is used to make element stay in the same place on the screen even when the user scrolls. You can then use the left, right, top, and bottom properties to position the element where you want it.
Example
在该示例中，可以看到在向下滚动时段落元素仍然位于原地。
In this example you can see that paragraph element remain there when you scroll down.
<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>Sticky Positioned Element
在 CSS 中， position: sticky 属性用于使任何元素停留在容器的顶部，即使用户滚动页面。然后，可以使用 left、right、top 和 bottom 属性将元素放置在所需位置。
In CSS position: sticky property is used to make any element stay at the top of container even when the user scrolls. You can then use the left, right, top, and bottom properties to position the element where you want it.
position: sticky 属性是 position: relative 和 position: fixed 属性的组合。
The position: sticky property is a combination of the position: relative and position: fixed properties
Example
在该示例中，可以看见滚动时固定移动至顶部。
In this example you can see that when you scroll, fixed move to top
<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>Positioning Text in an Image
在以下示例中，可以使用 position: absolute 属性将图像内的文字放置在不同的方向。这些文字元素分别放置在左上角、右上角、左下角和右下角。
In following example, you can use the position: absolute property to position text in different directions inside an image. The text elements are positioned at the top left, top right, bottom left, and bottom right corners.
Example
在以下示例中，我们在图像上定位了文字。
In the following example we have positioned text on an image.
<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 Position Related Properties
以下是所有与 position 相关的 CSS 属性的列表：
Following is the list of all the CSS properties related to position:
Property |
Description |
Example |
Used with the position property to place the bottom edge of an element. |
||
Sets the clipping mask for an element. |
||
Used with the position property to place the left edge of an element. |
||
Determines how overflow content is rendered. |
||
Used with the position property to place the right edge of an element. |
||
Sets the positioning model for an element. |
||
Sets the vertical positioning of an element. |
||
Sets the rendering layer for the current element. |