CSS position something on top without using negati

2019-08-28 05:46发布

站内问答 / HTML/CSS
1806 2 5

this is probably really simple thing but i just dont know how to do it without using something like padding-top with negative values, my site looks like:

http://funedit.com/imgedit/soubory/small_9858499121396392876.jpg

My CSS is:

.center {
  width: 1030px;
  margin: 0 auto;
}
.top-panel {
  background-image: url("images/top_panel.png");
  background-repeat: repeat-x;
  background-position: center;
  height: 43px;
  padding-top:5px;
}
a.top-button{
  background: url("images/top_button.png");
  height: 37px;
  width: 141px;
  background-repeat: no-repeat;
  display: block; 
}
.text {
  color: #9c9c9c;
  padding: 0px 160px;
  line-height: 43px;
  position: relative;
}
.panel {
    color: #6ab1ed;
}

and my HTML:

<body>
  <div class="top-panel">
  <div class="center"> 
  <a class="top-button" href="#"></a>
  <div class="text">Prave hraje 5000 hracov na 150 serveroch!
  <div class="panel">Registruj sa zdarma nebo</div></div>
  </div>
  </div>  
</body>

Can somebody really simply explain me how can i do it?

2条回答
\"骚年 ilove
2楼-- · 2019-08-28 06:13

Try 

.top-panel {
     position:absolute; //or 'fixed' if you want it to stay there on scroll
     top:0; 
     left:1%; 
    right:1%;
}
查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
3楼-- · 2019-08-28 06:25

I think you just messing with different HTML elements where there is no need to. Try this:

CSS:

.top-panel {
  position: relative;
  background-image: url("images/top_panel.png");
  background-repeat: repeat-x;
  background-position: center;
  height: 43px;
  padding-top:5px;
}
a.top-button{
    float: left;
  background: url("images/top_button.png");
  height: 37px;
  width: 141px;
  background-repeat: no-repeat;
  display: block; 
}
.text {
  position: inline;
  color: #9c9c9c;
  position: relative;
}
.panel {
    position: inline;
    color: #6ab1ed;
}

HTML:

<body>
<div class="top-panel">
    <div class="center"> 
        <a class="top-button" href="#"></a>
        <p><span class="text">Prave hraje 5000 hracov na 150 serveroch!</span><br/>
        <span class="panel">Registruj sa zdarma nebo</span></p>
    </div>
</div>
</body>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)