CSS - Position 属性_CSS 菜鸟教程

CSS Position 属性位置有助于操作网页中元素的位置。属性 top、bottom、right 和 left 用于控制其在页面上的确切位置。它们指定元素与其边缘的偏移量

Position 属性可用于创建浮动元素、浮动侧边栏和其他交互功能。

可能的值

static -元素根据页面的默认或正常流进行定位。因此，如果我们设置左/右/上/下/z 索引，那么对该元素不会有任何影响。
relative −元素的原始位置根据页面的正常流动，就像静态值一样。但现在左/右/上/下/z-index 将起作用。位置属性将元素从原始位置推向该方向。
absolute −该元素将从文档流中完全删除。然后，它相对于其包含块进行定位，并使用侧偏移属性放置其边缘。绝对定位的元素可能会与其他元素重叠，或者被它们重叠。
fixed -元素的固定定位就像绝对定位一样，只是固定元素的包含块始终是视口。在这里，元素从文档的流程中完全删除，并且没有相对于文档的任何部分的位置。
sticky -该元素粘在其最近的位置祖先的顶部，该祖先具有“滚动机制”。

适用于

所有元素。

语法

position: static | relative | absolute | fixed | sticky;

CSS Position - 静态值

使用 position： static 属性时，元素将在文档流中正常定位。left、right、top、bottom 和 z-index 属性不会影响元素。这是默认值。

<html>
<head>
<style>
	 	.normal-box {
	 	 	 display: inline-block;
	 	 	 background-color: #f2c3ee;
	 	 	 border: 1px solid #000000;
	 	 	 padding: 10px;
	 	 	 margin-bottom: 20px;
	 	 	 width: 300px;
	 	 	 height: 100px;
	 	}
	 	.static-box {
	 	 	 display: inline-block;
	 	 	 position: static;
	 	 	 background-color: #bbedbb;
	 	 	 border: 1px solid #000000;
	 	 	 padding: 10px;
	 	 	 width: 300px;
	 	 	 height: 100px;
	 	}
</style>
</head>
<body>
	 	<div class="normal-box">
	 	 	 <h2>Normal Box</h2>
	 	 	 <p>This is a normal box.</p>
	 	</div>

	 	<div class="static-box">
	 	 	 <h2>Position: static</h2>
	 	 	 <p>This is a box with static position.</p>
	 	</div>
</body>
</html>

CSS Position - 相对值

CSS position：相对属性将元素相对于其在页面中的原始位置进行定位。您可以使用 left、right、top 和 bottom 属性来移动元素，但它仍会占用文档流中的空间。

<html>
<head>
<style>
	 	.normal-box {
	 	 	 display: inline-block;
	 	 	 background-color: #f2c3ee;
	 	 	 border: 1px solid #000000;
	 	 	 padding: 10px;
	 	 	 margin-bottom: 20px;
	 	 	 width: 300px;
	 	 	 height: 100px;
	 	}
	 	.relative-box {
	 	 	 display: inline-block;
	 	 	 position: relative;
	 	 	 left: 30px;
	 	 	 background-color: #bbedbb;
	 	 	 border: 1px solid #000000;
	 	 	 padding: 10px;
	 	 	 width: 300px;
	 	 	 height: 100px;
	 	}
</style>
</head>
<body>
	 	<div class="normal-box">
	 	 	 <h2>Normal Box</h2>
	 	 	 <p>This is a normal box.</p>
	 	</div>
	 	<div class="relative-box">
	 	 	 <h2>Position: relative</h2>
	 	 	 <p>This is a box with relative position.</p>
	 	</div>
</body>
</html>

CSS Position - 绝对值

具有 position： absolute 的元素将从文档流中取出，并相对于其最近的位置祖先（如果有）进行定位。如果没有定位的祖先，则元素将相对于视口进行定位。

您可以使用 top、right、bottom 和 left 属性来指定元素相对于其包含块的位置。

<html >
<head>
<style>
	 	.normal-box {
	 	 	 background-color: #f2c3ee;
	 	 	 border: 1px solid #333;
	 	 	 padding: 10px;
	 	 	 margin-bottom: 20px;
	 	 	 width: 350px;
	 	 	 height: 100px;
	 	}
	 	.absolute-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="normal-box">
	 	 	 <h2>Normal Box</h2>
	 	 	 <p>This is a Noraml box.</p>
	 	 	 <div class="absolute-box">
	 	 	 	 	<h2>Position: Absolute</h2>
	 	 	 	 	<p>This is a box with absolute position.</p>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS Position - 固定值

若要使元素即使在用户滚动时也保持在屏幕上的同一位置，可以将 position 属性设置为 fixed。然后，您可以使用 left、right、top 和 bottom 属性将元素放置在所需的位置。

<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">Tutorialspoint 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 Position - 粘性值

您可以将 position 属性设置为 sticky，以创建一个元素，当用户滚动浏览页面时，该元素会粘在视口的顶部。

position： sticky 属性是 position： relative 和 position： fixed 属性的组合

<html>
<head>
<style>
	 	.position_container {
	 	 	 width: 400px;
	 	 	 height: 200px;
	 	 	 background-color: #f2c3ee;
	 	 	 overflow: auto;
	 	 	 padding: 5px;
	 	}
	 	.sticky-position {
	 	 	 position: sticky;
	 	 	 top: 15px;
	 	 	 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="sticky-position">Tutorialspoint CSS Position Sticky</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>
	 	 	 <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 Position - 在图像中定位文本

在以下示例中，可以使用 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.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 属性的列表：

属性	描述
bottom	与 position 属性一起使用，以放置元素的下边缘。
clip	设置元素的剪切蒙版。
left	与 position 属性一起使用，以放置元素的左边缘。
overflow	确定溢出内容的呈现方式。
position	设置元素的定位模型。
right	与 position 属性一起使用，以放置元素的右边缘。
top	设置元素的定位模型。
vertical-align	设置元素的垂直位置。
z-index	设置当前元素的呈现层。

<< CSS - order 属性 CSS - hypens 属性 >>