实现谷歌风格用户信息模块：解决用户数据无法显示在圆形头像前方的问题

看起来你是想做一个类似谷歌账户信息的模块，让用户名、邮箱这些数据能正常显示在圆形头像的视觉前方（不管是位置排列还是层级优先级）对吧？我帮你调整代码，解决这个布局和层级的问题：

修改后的HTML代码 #

<div class="conta">
  <p>Você está logado com:</p>
  <!-- 新增容器包裹头像和用户数据，方便统一控制布局 -->
  <div class="user-info-group">
    <div class="perfil">{{name}}</div>
    <div class="dadosUser">
      <p>{{user.username}}</p>
      <p>{{user.email}}</p>
    </div>
  </div>
</div>

修改后的CSS代码 #

.conta{
  border: 1px solid var(--primary-color);
  padding: 15px;
  border-radius: 5px;
  margin-left: 30%;
  margin-right: 30%;
}

/* 用Flex实现头像和数据的横向排列，垂直居中对齐 */
.user-info-group {
  display: flex;
  align-items: center;
  gap: 15px; /* 头像和数据之间的间距，可按需调整 */
  margin-top: 10px;
}

.perfil {
  /* 先完善圆形头像的基础样式 */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  /* 设置较低层级，确保不会遮挡用户数据 */
  z-index: 1;
}

.dadosUser {
  /* 给用户数据设置更高层级，强制显示在头像前方 */
  z-index: 2;
  /* 优化文字排版 */
  line-height: 1.5;
}

.dadosUser p {
  margin: 0; /* 去掉p标签默认外边距，让排版更紧凑 */
}

关键调整说明 #

• 新增user-info-group容器，用Flex布局让头像和用户数据横向并排，同时垂直居中，彻底解决块级元素换行导致的布局混乱问题。
• 完善了圆形头像的样式，确保内部的字母能居中显示，同时设置z-index:1保持较低层级。
• 给用户数据容器设置z-index:2，明确层级优先级，就算出现意外重叠，数据也会显示在头像前方。
• 去掉了p标签的默认外边距，让文字排版更整洁美观。

如果你的头像是用图片实现的，只需要把.perfil里的background-color替换成background-image: url('你的头像路径')，再加上background-size: cover让图片充满圆形容器就行，其他布局逻辑完全通用。

备注：内容来源于stack exchange，提问作者Alan Pereira