将2个DIV定位在彼此之上

时间:2014-06-23 11:53:13

标签: html css

我正在使用PHP,HTML和CSS制作网站。我有这个问题:有2个div:profile_Nick和profile_Ranks。但是profile_Ranks不能直接跟踪profile_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>

Image

2 个答案:

答案 0 :(得分:0)

发现顺便说一句。

.profile_infoholder .profile_Nick
{
    position:absolute;
}

添加此修复。

答案 1 :(得分:0)

解决方案在这里:

DEMO

我刚从float

中删除了.profile_Nick属性
.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;
}

.profile_Ranks的样式表包含top:50px属性我已缩减为在演示的底部正确显示。

相关问题