CSS position something on top without using negati

2019-08-28 06:32发布

站内文章 / HTML/CSS
31 0 0

问题:

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:

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?

回答1:

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>


回答2:

Try 

.top-panel {
     position:absolute; //or 'fixed' if you want it to stay there on scroll
     top:0; 
     left:1%; 
    right:1%;
}


标签： html css margin padding
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~