固定的相对容器我很困惑如何做到这一点

Question

我对fixed，relative，absolute容器

抱有很大疑问

我有css这样的代码

.header {
position:fixed;
width:100%;
height:60px;
}
.page, .footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
}

和我的html代码一样......

<div class="header">--fixed content--</div>
<div class="page">--page content</div>
<div class="footer">--footer content--</div>

我已将bootstrap用于按钮样式。问题是header div是fixed，但page和footer内的内容position:relative;会查看标题内容。当我从page＆amp;移除footer时bootstrap buttons css它工作正常。但order(order(a, b)) #[1] 5 7 3 2 4 1 6 仍然会上升。

Answer 1

你应该这样使用：

.header {
  position:fixed;
  width:100%;
  height:60px;
  z-index: 99999999;/*adding higher index value than other divs*/
  /* This will ensure the header div always on top of other divs */
}
.page{
  position: relative;
  top: 61px;/* plus 1px height as of .header or use as per your requirement */
  /* but at least this should be 60px to show your .page div */
}

然后，您不需要为此问题定义最高值（重叠）。

Answer 2

试试这个：

.header {
  position:fixed;
  width:100%;
  height:60px;
  background: black;
  color: white;
  top: 0;
  left: 0;
  z-index: 10;
}
.page {
  position:relative;
  width: 80%;
  min-width: 980px;
  max-width: 1366px;
  background: #999;
  height:500px;
  color: white;
  padding-top: 60px;
  margin: auto;
}
.footer {
  position:relative;
  width: 80%;
  min-width: 980px;
  max-width: 1366px;
  background: #666;
  height:100px;
  color: white;
  margin: auto;
}

Fiddle Example

添加z-index将使您的标题始终位于其他内容之上。您可以根据自己的内容更改其值。 将填充顶部添加到“.page”以避免标题与正文内容重叠。