CSS将某些东西放在顶部而不使用负值答案

【问题标题】：CSS position something on top without using negative valuesCSS将某些东西放在顶部而不使用负值
【发布时间】：2014-05-12 23:19:18
【问题描述】：

这可能是非常简单的事情，但我只是不知道如何在不使用带有负值的 padding-top 之类的东西的情况下做到这一点，我的网站看起来像：

我的 CSS 是：

.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;
}

还有我的 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>

有人真的可以简单地解释一下我该怎么做吗？

【问题讨论】：

我不确定是什么问题
你想做什么？也许可以解决这个问题？
您不能将negative 值赋予padding... 因为填充在元素ant 内部，它自身不能具有负尺寸... margin 接受负...
我正在尝试这样做：funedit.com/imgedit/soubory/small_2087705911396393681.jpg?
不确定你想要什么？按钮居中？左边距：自动；边距右：自动；

标签： html css margin padding

【解决方案1】：

试试

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

【讨论】：

为什么投反对票？完美的工作答案。一直用它来把东西放在首位
是的，不是我反对它，反正它让我的网站看起来像：funedit.com/imgedit/soubory/small_1903208781396393468.jpg
您希望栏位在顶部，看起来好像是这样，您的问题是什么？
不，我不需要顶部的栏，对不起，如果我没有按我应该的方式描述它，我需要它看起来像：funedit.com/imgedit/soubory/small_2087705911396393681.jpg
如我在回答中所说，将应该保持在顶部的主 div。所有你想放在顶部的东西，放在那个 div 里面。或者您可以分配位置：绝对；顶部：0px；到每个元素并用 left:100px （或任何你想要的地方）移动它

【解决方案2】：

我认为你只是在没有必要的地方弄乱了不同的 HTML 元素。试试这个：

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>

【讨论】：

感谢您的回答，看来您比我更了解它，无论如何，当我使用您的代码时，我的网站看起来像：funedit.com/imgedit/soubory/small_19784547231396394327.jpg
制作 padding-top:0px;
HTML：<body> <div class="top-panel"> <p><a class="top-button" href="#"><img src="images/top_button.png" height="37" width="141" alt="button" /></a> <span class="text">Prave hraje 5000 hracov na 150 serveroch!</span> <span class="panel">Registruj sa zdarma nebo</span></p> </div> </body> CSS：.top-panel { background-image: url("images/top_panel.png") repeat-x center; text-align: center; } .top-button img { border: none; vertical-align: middle; } .text { color: #9c9c9c; position: relative; padding-left: 10px; } .panel { color: #6ab1ed; padding-left: 10px; }