简单 CSS 固定 header

Question

将以下页面 header 固定为 header 最简单的方法是什么？ http://presentationtube.com/header.php 我应该移动 header 中的菜单元素吗？

Answer 1

CSS:

#templatemo_header_wrapper {
     position:fixed;
}

如果不正确，您需要详细说明您的问题。

编辑

我想对此进行扩展。有不需要的额外标记。

当前的 css 看起来像这样：

#templatemo_header_wrapper {
  width: 100%;
  height: 65px;
  margin: 0 auto;
  background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
}

由于正文已设置在 margin:0 和 padding:0，因此您无需为 #templatemo_header_wrapper 指定顶部和左侧坐标。因此，为避免编写额外的 css，您可以将元素更改为：

#templatemo_header_wrapper {
  width: 100%;
  height: 65px;
  background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
  position: fixed;
}

我删除了边距属性，因为这在此处不适用。您也可以省去高度属性。有时为固定位置元素设置高度很有用。但是由于您的子元素也指定了高度（and/or 填充边距），这自然会根据需要向父容器添加高度。

因此最终标记可能如下所示：

#templatemo_header_wrapper {
  position: fixed;
  width: 100%;
  background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
}

Answer 2

#templatemo_header_wrapper {   
 top: 0px; position: fixed
 }

固定在顶部0

Answer 3

最简单的方法：

#templatemeo_header_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: 70px;
}

简单 CSS 固定 header

Simple CSS fixed header

css

header