前言

昨天觉得可以给自己博客园的个人头像右下角添加一个类似于微信一样的状态展示自己当前的情况的小组件。例子很简单，基础很好地请绕道而行！

绝对定位与相对定位

主要用的就是 CSS 的绝对定位和相对定位，有一个非常好用的规则：子绝父相。父元素下的子元素是绝对定位，父元素必须是相对定位。子元素的父元素可以是父父元素（无线套娃）。但是，一般就是子元素的父元素设置为相对定位。

DOM 树

绝对定位和相对定位是什么呢？我们知道 HTML 的结构，即 DOM 树。像是一颗树，根节点衍生出各种子节点，子节点再衍生出各种子子节点。子节点的子节点的子节点就是子子子节点，相对于第二个节点的第三个节点，第三个节点是第二个节点的子节点。这样说有点绕，画图理解：

①绝对视角：node1 下所有的节点都以 node1 主，其节点按照层数来增加“子”，例如：node4 与 node1 之间相差一层，那就是子+子；②相对视角：node4 就是 node4 的子。

文档流

绝对定位的节点内容将脱离文档流，文档流就是页面中可显示的元素（节点、标签）在整个页面中所占用的位置。

下面是一个父节点下有五个子节点，将演示绝对定位导致节点脱离文档流的效果：

把 node2 设置为绝对定位，现在页面上的元素显示的效果如下：

仔细观察发现， node3 被 node2 隐藏了，node2 脱离了文档流，不占用页面空间，所以 node3 补上原本 node2 所占的位置。绝对定位还可以使 node2 拥有“浮动”效果，即悬浮在补上来得 node3 之上。

开始

<div class="profile-wrap">
	<img class="avatar" src="https://img1.baidu.com/it/u=1927500645,1701823372&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
	<div class="bloger-status">
		<div class="bloger-status-icon"></div>
		<div class="bloger-status-desc">摸鱼中</div>
	</div>
</div>

.profile-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;

	.avatar {
		border-radius: 10px;
		width: 100%;
	}

	.bloger-status {
		padding: 4px;
		border-radius: 10px;
		background-color: rgba(240, 230, 140, 0.95);
		position: absolute;
		right: 5px;
		bottom: 4px;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;

		.bloger-status-icon {
			margin-right: 5px;
			width: 8px;
			height: 8px;
			border: 3px solid gainsboro;
			border-radius: 50%;
			background-color: #2d8cf0;
		}

		.bloger-status-desc {
			color: var(--text-color);
			font-size: 12px;
		}
	}
}

效果图：

标签：定位,center,微信,元素,绝对,HTML,node2,节点,CSS
来源： https://www.cnblogs.com/shiramashiro/p/16288247.html