HTML绝对定位与相对定位

一开始接触HTML和CSS时，不可避免地会遇到定位的问题，这时会很难分清楚绝对定位和相对定位区别，导致很多时候自己在用的时也是两者都试试看，哪个好用哪个，这是不可取的。下面讲述一下两者的区别，并以自己过来人的身份提供一种简单易记的方法。

首先先在这里引入W3C官方对这两者的定义：
CSS 相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
CSS相对定位

CSS 绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
CSS绝对定位

看了这么一堆官方的定义，并不是很直观，这里引用下官网的图稍微直观点：
CSS 相对定位
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。如下图：

CSS 绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

看两个图文字介绍，可能有点长，相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。下面具体应用下：
相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" /><!-- 兼容 -->
		<title>position:relative;</title><!-- 标题 不显示 -->
		<style type="text/css">/* CSS样式 一般全部写在头部利于规范 */
		    h2 {
			border: 2px solid black;
		    }/* 加上边框看起来更明显 */
			.left {
				position: relative;
				left: -20px
			}/* 相对定位，可取负数 */ 
			.right {
				position: relative;
				left: 20px
			}
		</style>
	</head>
	<body>
		<h2>正常位置标题</h2><!-- 正常不定位时在的位置 -->
		<h2 class="left">正常位置向左20px</h2><!-- 正常位置向左20px所在的位置 -->
		<h2 class="right">正常位置向右20px</h2><!-- 正常位置向左20px所在的位置 -->
	</body>
</html>

然后效果是这样的：在这里插入图片描述

相对定位还是简单理解的，然后是绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" /><!-- 兼容 -->
		<title>position:absolute;</title><!-- 标题 不显示 -->
		<style type="text/css">/* CSS样式 一般全部写在头部利于规范 */
			.abs {
				position: absolute;
				left: 100px;
				top: 150px
			}
		</style>
	</head>
	<body>
		<h2 class="abs">带绝对定位的标题</h2>
		<p>通过绝对定位，将此标题放在距离页面左侧 100px，距离页面顶部 150px的位置处</p>
	</body>
</html>

效果如下：
在这里插入图片描述
这里，元素没有已定位的祖先元素，所以它的位置相对于最初的包含块。
EMMM，怎么理解最初的包含块位置呐，试着加定位时不加数值，我们来看看效果：

不难看出：

这样就好记多了，那如果有已定位的祖先元素会怎么样呐？其实也一样，只是一开始的初始位置发生了改变，我们可以用上面讲的，加定位不加数值来看到其初始位置，然后加入向左向右等来调整位置。
总结下还是前面那句话，相对定位相对的是自己初始位置，而绝对定位相对于已经定位的祖先元素，没有的话相对于最初的包含块。

HTML绝对定位与相对定位

HTML绝对定位与相对定位

猜你喜欢