CSS Position（定位）元素详解

postion的定位元素一共有5个

static
relative
absolute
fixed
sticky

position：static

static定位是系统默认的，也就是说我们不需要加 position：static； 系统会直接使用此方法定位。（虽然它是定位的一种，但是实际上它就没有定位咱们后面四种定位的能力）。这里元素的排列方式是遵循正常的文档流对象。也就是说有关元素将按照它们在html中编写的先后顺序出现在浏览器窗口里。

什么是文档流呢？

顾名思义，就是文档（html元素）以流的方式放置在我们的浏览器中。浏览器遵从从左向右，从上到下的堆叠和排列方式。举个例子。大家可以清楚地看到，这就是以流的方式进行堆叠和排列，块级元素（div，p）独占一行，因此都是从上到下依次堆叠，而行内元素（span）不会独占一行，因此都是从左到右依次排列。这就是文档流对象的排列方式。这也是static对元素的定位方式。在这里插入图片描述 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>static定位</title> 
<style>
	p,div{
		border:1px solid grey;
		width: 100px;
		height: 100px;
	}
</style>
<div></div>
<div></div>
<span>yes</span>
<span>no</span>
<span>boy</span>
<span>girl</span>
<p>简单的演示1</p>
<p>简单的演示2</p>
</body>
</html>

position：relative

relative是相对定位，相对谁呢？相对于其正常位置进行定位我们继续举一个例子。

最外边偏向于黄色的那个边框是body边框，这是没有设置position：relative属性时的文本位置在这里插入图片描述 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>static定位</title> 
<style>
	body{
		border: 1px solid burlywood;
		height: 200px;
	}
</style>
<body>
<p>这是一段文字</p>
</body>
</html>

这是设置了position：relative属性时的文本位置，可以发现它没有任何变化。大家可能会有疑惑。这是为什么呢？那设置这个position: relative;有什么用呢？

实际上position: relative;必须配合"top"、"left"、 "bottom"、以及"right"来使用。在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>releative定位</title> 
<style>
	body{
		border: 1px solid burlywood;
		height: 200px;
	}
	p{
		position: relative;
	}
</style>
<body>
<p>这是一段文字</p>
</body>
</html>

当我们添加了如下这段代码后，文本明显产生了偏移。

==注意，用position：static；时，"top"、"left"、 "bottom"、以及"right"这些属性不起作用。==

left:50px;
top:50px;

在这里插入图片描述 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>releative</title> 
<style>
	body{
		border: 1px solid burlywood;
		height: 200px;
	}
	p{
		position: relative;
		left:50px;
		top:50px;
	}
</style>
<body>
<p>这是一段文字</p>
</body>
</html>

position：absolute

absolute绝对定位，==相对于 static 定位以外的第一个父元素进行定位==。（同relative，要配合"top"、"left"、 "bottom"、以及"right"这些属性使用）

我们把这段文字放到一个div盒子里。不加任何定位，看它的正常位置。

在这里插入图片描述 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>releative</title> 
<style>
	body{
		border: 1px solid burlywood;
		height: 200px;
	}
	#div1{
		border: 1px solid #F0AD4E;
		margin: 20px;
		width: 500px;
		height: 150px;
	}
</style>
<body>
	<div id="div1">
		<p>这是一段绝对定位的文字</p>
	</div>

</body>
</html>

如果我们这个时候加了如下这段代码position: absolute; left: 10px; top: 20px;，看它的位置如何

在这里插入图片描述看到没。它的偏移是这样子的。它并没有相对于它外层的div容器进行偏移，也没有相对于body，而是对浏览器进行偏移的。因为它的父元素div没有没有进行position设置（默认为static），因此它继续找body，body也没有设置position（默认值也是static）。因此它只能按照浏览器进行定位，然后进行偏移。主要原因是这个：。==相对于 static 定位以外的第一个父元素进行定位==

我们试着在body添加position: relative;代码，其它代码不改变，看它是如何偏移的。可以看出文字的位置发生了改变，因为它是按照body进行定位，然后向右偏移10px的。在这里插入图片描述我们再试着在div中添加position: relative;代码，继续看效果可以看出它这回是相对于div向右偏移10px的。==相对于 static 定位以外的第一个父元素进行定位==

position：fixed

元素的位置相对于浏览器窗口是固定的，不会随着窗口的滚动而改变位置。示例如下：在这里插入图片描述第一段文字是我没有加position：fixed滑动窗口时文字的状态

第二段文字是我加了position：fixed滑动窗口时文字的状态

可以明显的看出，fixed就是把元素固定在浏览器上，不会随着窗口的滚动而改变位置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>releative</title> 
<style>
	body{
		width: 100%;
		height: 2000px;
	}
	#p2{
		position: fixed;
	}
</style>
<body>
		<p>这是一段没有fixed定位的文字</p>
		<p id="p2">这是一段有fixed定位的文字</p>
</body>
</html>

position：sticky

sticky 英文就是是粘，粘贴的意思，就是将一个元素黏在窗口上，使它不会消失。当它在窗口内时，它的属性就是relative，当在滑动时它要消失的时候，它就变成fixed了。总之就是你一直可以看到它。

它需要配合着top、left、bottom、right使用。这里演示top的用法，我们往下滑动窗口，使它一直存在。我们这里设置position: sticky; top: 10px;（粘性定位，使它总是距离上边界10px）。我们看效果：在这里插入图片描述可以看到，我们不管如何滑动窗口，它总是距离上边界10px。相关代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>releative</title> 
<style>
	body{
		width: 100%;
		height: 2000px;
	}
	#p2{
		position: sticky;
		top: 10px;
		background-color: #F2DEDE;
	}
</style>
<body>
		<p>这是一段没有sticky定位的文字</p>
		<p id="p2">这是一段有stickyd定位的文字</p>
</body>
</html>

最后一点

大家在学习absolute定位的时候，最先开始我们不是定位到浏览器了吗？之后给body和div设置了position：relative;之后，它就改变成以body和div参照进行定位，这也是一个知识点。就是可以不用每次参照浏览器进行定位，我们还可以参照我们自己想要的元素进行定位。因此可以通过relative和absolute组合的方式将元素定位。这种方式在布局时经常用到。还有就是获取坐标也很方便。

组合定位（relative和absolute）
坐标获取（$(this).position().left）

以上就是一些关于position定位的基础知识，希望可以帮助大家掌握这个知识点。如果我有什么理解不到位的地方，欢迎大家指正。

CSS Position属性详解