CSS 定位

Question

我在顶部有一个 header，它包含以下 css 规则：

 position: fixed;

我还有一些图像符合（并且需要符合）以下 css 规则：

 position: relative;

问题是，当用户滚动时，我的 header 总是位于页面顶部，但是当他们到达图像（使用 position:relative）时，它位于我的 header。但是 header 应该总是在最前面。我可以申请另一个 css 规则来允许这种情况发生吗？

Answer 1

刚在CSSz-index: 9999设置到headerdiv.

Answer 2

这个问题可能与 z-index 有关。给你的headerz-index:999999999，你的问题就迎刃而解了

Answer 3

在你的 header CSS 添加 z-index 属性:

与：

z-index:10 // can be any number but should be greater than the z-index of image

在图片CSS中添加：

z-index:5; //should be less than the z-index of header

Answer 4

无需将位置设置为relative或absolute。您可以使用以下代码：

<html>

<head>
  <title>Document Edit</title>
</head>
<style type="text/css">
  body {
    padding: 0px;
    margin: 0px;
  }
  
  .wrap {
    width: 100%;
    height: 1500px;
    background-color: #DDD;
  }
  
  .header {
    width: 100%;
    height: 60px;
    background-color: #004080;
    position: fixed;
  }
  
  .imgdiv {
    width: 400px;
    height: 400px;
    float: left;
    background-color: green;
  }
</style>

<body>
  <div class="wrap">
    <div class="header"></div>
    <div class="imgdiv"><img src="error1.png" width="400" height="400"></div>
  </div>
</body>

</html>

CSS 定位

CSS Positioning

html

css

positioning