我如何使标题始终保持在顶部？

Question

我想制作一个像http://www.chacha.com一样的标题（不会移动，宽度和高度大约一样，并且可以将div放入其中并且还必须是图像）

我从一个空白的html文档和一个空白的css页开始，所以目前我还没有编写任何代码。

我已经连续两天尝试这样做，所以我非常感谢任何人都可以提供的任何帮助。

我有字迹，所以如果有人也可以给我提供完美标头和完美背景尺寸的图像尺寸，我将不胜感激。

Answer 1

CSS：

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: url(yourimage.png) repeat-x;
}

<!--html -->
<div id="header"></div>

这应该为您提供一个起点，在不确切知道布局应该是什么的情况下，我无法告诉您更多信息。

Answer 2

您要查找的CSS属性是position: fixed，它将相对于视口定位元素。这是很好的定位细分：https://developer.mozilla.org/en-US/docs/CSS/position

在此特定情况下，您所拥有的是具有大致沿这些样式的样式的元素：

#header_id {
    position: fixed;
    width: 100%;
    height: 35px;
}

您不必设置高度，但是除非固定元素中包含内容，否则如果未指定高度，它将折叠。他们还似乎在元素上放置了drop-shadow，以获得整洁的浮动效果。

[如果要在其中包含图像，则只需将<img>放在标题元素中，或将其用作CSS中的background-image网址，然后将其与background-position一起放置（另请参见：https://developer.mozilla.org/en-US/docs/CSS/background-position尽管如果您想对该属性进行任何过于具体的操作，则底部的兼容性表很重要）。

您可以对任何块级元素（或在其上设置了display:block的任何元素）执行此操作。在您的示例中，他们使用HTML5 <header>标签；如果<div>不适合您的页面，则<header>也可以。

我建议将Firebug插件与Firefox（或其他现代浏览器使用类似的开发人员控制台）一起使用-您可以右键单击页面上的元素，然后从下拉菜单中选择“检查元素”，然后对这两个元素进行细分标记和样式，以了解其他网站的构建方式。当您浏览互联网并看到一些东西并思考时，这非常有用，这是一个绝妙的技巧，它如何工作？

Answer 3

全角固定头