如何制作始终位于顶部的标题？答案

【问题标题】：How do I make a header that remains in the top at all times?如何制作始终位于顶部的标题？
【发布时间】：2012-08-09 19:46:48
【问题描述】：

我想制作一个像http://www.chacha.com 这样的标题（不动，大约那么宽和那么高，并且能够在其中放置 div，并且还必须是图像）

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

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

我有 gimp，所以如果有人能给我提供完美标题和完美背景大小的图像尺寸，我会更加感激。

【问题讨论】：

在大多数现代浏览器中，您可以右键单击并检查元素，它会显示应用了哪些 CSS。如果您使用的是 FireFox，FireBug 扩展非常棒
有关 CSS 位置属性的浏览器兼容性信息，请参见 quirksmode.org：quirksmode.org/css/position.html
如果有人回答了您的问题，请礼貌地将他们的回答标记为正确答案。

标签： html header position fixed

【解决方案1】：

CSS：

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

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

这应该为您提供一个起点，如果不确切了解布局应该是什么，我无法告诉您更多信息。

【讨论】：

你可以使用的影子box-shadow
不客气，亚当。如果您对答案感到满意，请接受它:)

【解决方案2】：

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

在这种特定情况下，您得到的是一个样式大致如下的元素：

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

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

如果你想在里面放一张图片，你可以把 <img> 放在 header 元素中，或者在 CSS 中将它用作 background-image url 并用 background-position 定位它（另见：@987654322 @虽然如果你想对这个属性做任何过于具体的事情，底部的兼容性表很重要）。

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

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

【讨论】：

【解决方案3】：

对于全宽固定头

 header { 
    width:100%;
    background:green;
    height:60px;
    margin:-8px;
    position:fixed;
}

对于非全宽固定头
创建一个div并设置宽高（也可以通过float:left, float:right左右设置）然后在这个 div 中放入上面的代码，但没有 margin:-8px; 并将宽度更改为您的 div 的宽度。这是一个测试

【讨论】：