CSS 数据类型 <position> 表示 HTML 元素在其包含元素中的定位行为。它用于设置相对于元素框或另一个元素的位置。
<position> 与背景图像的background-positionobject-position，mask-position，offset-position、offset-anchor和transform-origin 一起使用。
下图描述了元素的所有位置:
一两个关键字和可选偏移量用于指定 CSS 中的 <position> 数据类型。
可以使用术语"center"、"top"、"right"、"bottom"和"left"。这些关键字与元素框的中心线或外部边界匹配。
中间项可以指示顶部边缘和底部边缘之间的中点，也可以指示左侧边缘之间的中点。和右侧，具体取决于上下文。
<position> 数据类型允许将偏移量表示为绝对 <length> 值或相对 <percentage> 值。
负值会导致元素向与正值相反的方向移动，从而导致其移动到右侧或底部。如果只给出一个偏移量，则确定 x 坐标；另一个轴的值默认为中心。
语法
<position> = [ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | >length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] CSS <position>: 有效位置
center
left
center top
right 5.5%
bottom 15vmin right -3px
15% 25%
4rem 22px
CSS <position>: 无效位置
left right
bottom top
10px 15px 20px 15px
CSS <position>: 相对位置
以下示例演示了 <position> 数据类型在 CSS 属性 background-position 中的使用，其中传递的值是相对的，即中心和左侧。线性渐变放置在页面的左中位置。
<html>
<head>
<style>
body {
height: 200px;
background-color: #222;
background-image: radial-gradient(circle at center, red, green 3em);
background-size: 15em 10em, 30% 70%, 100px 70px;
background-position: center left;
background-repeat: no-repeat no-repeat;
}
</style>
</head>
<body>
</body>
</html> CSS <position>: 绝对位置
以下示例演示了 <position> 数据类型在 CSS 属性位置中的使用，以及其他属性，如顶部、左侧、右侧和底部，其中传递的值是相对和绝对的。
<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">文本居中</h3>
<h3 class="top-left">文本居顶左</h3>
<h3 class="top-right">文本居顶右</h3>
<h3 class="bottom-left">文本居底左</h3>
<h3 class="bottom-right">文本居底右</h3>
</div>
</body>
</html> CSS <position>: 固定位置
以下示例演示了使用<position> 数据类型在 CSS 属性位置中，传递的值是固定的。
<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">yxjc123.com CSS Position Fixed</p>
<p>在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭</p>
<p>在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭</p>
<p>在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭</p>
</div>
</body>
</html>