Html 将两个div放置在彼此的顶部

我正在使用PHP、HTML和CSS制作一个网站。我有一个问题：有两个分区：profile_Nick和profile_Ranks。然而，profile\u排名不能直接在profile\u Nick下面。我如何设置他们在WalkerJetBat文本下的位置？谢谢

.profile_Nick
{
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: white;
    font-size: 34px;
    margin-left: 12px;
    padding-left:11px;
    padding-top:2px;
    padding-right:11px;
    padding-bottom:2px;
    float: left;
    left:12px;
    max-width: 405px;
    background-color: rgba(0,180,255,0.60);
    border-radius: 2px;
}

.profile_Ranks
{
    position:relative;
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: white;
    font-size: 12px;
    margin-left: 12px;
    padding-left:11px;
    padding-top:2px;
    padding-right:11px;
    padding-bottom:2px;
    float:left;
    background-color: rgba(0,180,255,0.60);
    border-radius: 2px;
    top:50px;
}


<div class="profile_infoholder">
  <div class="profile_Nick">
    <? echo $steamprofile['personaname']; ?>
  </div>
  <div class="profile_Ranks">
    Developer
  </div>
  <div class="profile_Ranks">
    +Premium
  </div>
</div>

顺便说一句

.profile_infoholder .profile_Nick
{
    position:absolute;
}

添加此固定解决方案。

解决方案如下：

我刚刚从.profile\u Nick类中删除了you float属性

---

您的.profile_列组的样式表包含top:50px属性，我已将其缩减为在演示的底部正确显示

那完全是过火了。。。您正在使用位置和浮动在一起！！那完全是过火了。。。您正在使用位置和浮动在一起！！如果你使用位置，你不需要浮动。但是如果需要的话，它需要添加第二个等级。将浮动和位置一起使用没有意义，它们做的事情几乎相同，但不完全相同。检查并确认。

.profile_Nick
{
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
font-size: 34px;
margin-left: 12px;
padding-left:11px;
padding-top:2px;
padding-right:11px;
padding-bottom:2px;
left:12px;
max-width: 405px;
background-color: rgba(0,180,255,0.60);
border-radius: 2px;
}