CSS 数据类型 - position_CSS 菜鸟教程

CSS 数据类型 <position>表示 HTML 元素在其包含元素中的定位行为。它用于设置相对于元素框或其他元素的位置。

<position> 与背景图像的背景位置、对象位置、蒙版位置、偏移位置、偏移锚点和变换原点一起使用。

下图描绘了元素的所有位置：

在 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> - 相对位置

以下示例演示了在 CSS 属性 background-position 中使用 <position>数据类型，其中传递的值是相对的，即 center 和 left。线性渐变放置在页面的左中部分。

<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> - 绝对位置

以下示例演示了在 CSS 属性 position 中使用 <position> 数据类型，以及其他属性（如 top、left、right 和 bottom），其中传递的值是相对值和绝对值。

<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="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> - 固定位置

以下示例演示了在 CSS 属性位置中使用 <position>数据类型，其中传递的值是固定的。

<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>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	 	 	 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	 	 	 <p class="fixed-position">qikepu CSS Position Fixed</p>
	 	 	 <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	 	 	 <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	 	 	 <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	 	</div>
</body>
</html>

<< CSS - 伪元素 - ::placeholder CSS Masking - mask-border-outset 属性 >>