标签：定位 center 微信 元素 绝对 HTML node2 节点 CSS

前言

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

绝对定位与相对定位

主要用的就是 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。