css - positioning（定位）元素_CSS 菜鸟教程

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	设置当前元素的呈现层。

<< CSS - vertical-align （垂直对齐）属性 css - layers（图层）效果 >>