如何去除页面顶部空白并让图片置顶且被header层叠？

要实现图片从页面顶部开始、header层叠在图片上方，同时移除顶部空白，你需要做以下几个修改：

• 删掉.header里的<br>标签，这玩意儿是顶部空白的元凶，它会自动加换行间距
• 把.header的定位从sticky改成fixed，这样header会脱离文档流，不占页面空间，图片就能顶到顶部
• 给.header加上下内边距代替原来<br>的作用，避免导航内容挤在一起
• 调整图片样式，确保它铺满宽度且没有默认间距

修改后的完整代码 #

CSS

* {
  font-family: Arial;
  color: #323232; /* 补上缺失的颜色值，避免继承异常 */
  background-color: transparent; /* 设为透明，不覆盖下层元素背景 */
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* 让padding不影响元素总宽度 */
}

li {
  display: inline;
  margin: 0 10px; /* 给导航项加左右间距，避免挤在一起 */
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: #323232;
}

.header {
  background-color: green;
  color: #323232;
  width: 100%;
  text-align: center;
  z-index: 1;
  opacity: 0.3;
  position: fixed; /* 改成fixed脱离文档流 */
  top: 0;
  padding: 10px 0; /* 用padding代替<br>的间距 */
}

.picture {
  width: 100%; /* 图片铺满容器 */
  display: block; /* 去掉行内元素的底部空白 */
  z-index: -1;
}

.test {
  margin-top: 20px; /* 给下方内容加间距，避免被fixed的header挡住 */
  padding: 0 10px;
}

HTML

<div class="header">
  <ul>
    <li> <a class="atest" href="/">item 5</a> </li>
    <li> <a class="atest " href="/">item 3</a> </li>
    <li> <a class="atest " href="Blog">item 3</a> </li>
    <li> <a class="atest " href="Gallery">item 2</a> </li>
    <li> <a class="atest " href="Schtuff">item 1</a> </li>
  </ul>
</div>

<img class="picture" src="https://4get.ca/proxy?i=https%3A%2F%2Fi1.wp.com%2Fhandluggageonly.co.uk%2Fwp-content%2Fuploads%2F2018%2F01%2FHand-Luggage-Only-5-4.jpg%3Ffit%3D1600%252C904%26ssl%3D1" alt="Girl in a jacket">
<div class="test">
  <h1>testtrtertert</h1>
  <p>tyer te45rt herter tertkgh eruithetrther ther</p>
</div>

关键修改说明 #

1. 移除<br>：直接删掉header里的两个<br>，彻底消除顶部多余空白
2. fixed定位header：让header固定在视口顶部，不占用文档流空间，图片自然顶到页面最上方
3. padding替代<br>：给header加padding:10px 0，保证导航内容有合适的上下间距，不会挤成一团
4. 图片样式调整：display:block去掉图片默认的底部空白，width:100%确保图片铺满屏幕宽度
5. 下方内容加margin：给.test加margin-top，避免页面内容被fixed的header遮挡

内容的提问来源于stack exchange，提问作者manwholives20