我可以同时拥有一个固定和静态的 div 吗？答案

【问题标题】：Can I have a div fixed and static at the same time?我可以同时拥有一个固定和静态的 div 吗？
【发布时间】：2017-02-21 22:48:21
【问题描述】：

我想用一个 div 和一些 css 制作一个水平条，所以当我向下滚动网页时，该条会根据用户滚动页面的距离从左到右改变颜色。

栏应固定，使其始终位于页面顶部。但是，当我选择“位置：固定”时，元素会消失在栏后面。另一方面，当我选择“位置：静态”时，当我向下滚动时，该栏会消失。

是否可以让栏始终位于视口的顶部，并且其后面不会消失任何元素？

编辑

到目前为止，我已经提出了这个解决方案：我创建了第二个具有相同宽度和高度但具有“位置：静态”和“z-index：-1”的 div。

第二个 div 确保栏和元素不重叠。

我认为这是一个丑陋的解决方案，但不幸的是，到目前为止其他建议都不起作用。

之前：

之后：

HTML：

<div class="loading_bar_horizontal_base"></div>
<div class="loading_bar_horizontal_base_static"></div>

CSS：

.loading_bar_horizontal_base {
  position: fixed;
  width: 100%;
  height: 5px;
  background-color: #ffe086;
}

.loading_bar_horizontal_base_static {
  position: static;
  width: 100%;
  height: 5px;
  z-index: -1;
}

【问题讨论】：

我认为你需要使用 z-index 来解决这个问题。
可能重复：stackoverflow.com/questions/18894400/…
@Eamonn：我已将所有元素的 z-index 重置为 0，但元素仍然消失在它后面
柱的 z-index 怎么样？设置得比其他的高。
@Eamonn：我已将所有元素的 z-index 设置为 0，将条形的 z-index 设置为 1。条形仍然浮动在所有内容的前面。我希望栏就像浏览器的扩展，这样“真实”视口就从它下面开始。

标签： html css

【解决方案1】：

这就是你要找的：

HTML

 <div class="header">
  <div class="progress">
  </div>
</div>

CSS

body {
  min-height: 700px;
  font-size: 90px;
  padding: 0; 
}

.header {
  height: 30px;
  background:black;
  width:100%;
  position: fixed;
  z-index: 10;
}

.progress {
  width: 10px;
  height: 26px;
  margin-top: 2px;
  background: red;
}

JS（带 JQuery）

var headerWidth = $('.header').width();
var progress = $('.progress');
var body = $('body');
body.on('scroll', function() {
    progress.width( (body.scrollTop() / body.height() * 100) + '%');
});

【讨论】：