设置position为relative时背景图无法显示？z-index布局问题求助

嘿，我来帮你拆解这个问题～你遇到的现象其实和CSS的定位规则、堆叠上下文以及百分比高度的计算逻辑都有关系，咱们一步步理清楚：

为什么必须设position: absolute才能显示背景图？ #

1. z-index只对非static定位元素生效 #

默认情况下，元素的position是static（静态定位），这时候你设置的z-index完全不起作用——CSS规定z-index仅对relative/absolute/fixed/sticky这些定位元素生效。如果#formtitlebg是静态定位，哪怕你设了z-index: -5，它也没法跑到#formtitle的下方，自然没法作为背景显示。

2. 静态元素的百分比高度无法自适应父元素 #

你给#formtitlebg设了height: 100%，但它的父元素.center_form--header是height: auto（高度由子元素#formtitle撑开）。对于静态定位的元素，height: 100%要求父元素有明确的固定高度（比如height: 200px），否则会被计算为0，背景图自然看不到。

而当你把#formtitlebg设为absolute后，情况就变了：绝对定位元素的百分比高度是相对于最近的定位父元素（这里.center_form--header是relative定位，刚好符合）的高度计算的，此时父元素的高度由#formtitle撑开，#formtitlebg就能正确继承这个高度，背景图也就显示出来了。

3. 静态元素会占据文档流空间 #

如果#formtitlebg是静态定位，它会在文档流中占据位置，哪怕高度能生效，它也会排在#formtitle的前面（按HTML顺序），而#formtitle的背景色会覆盖它。设为absolute后，它会脱离文档流，不会占据空间，再配合有效的z-index，就能完美作为背景层存在于#formtitle下方。

优化后的代码参考 #

我帮你调整了一些冗余的CSS属性，同时优化了背景图的显示效果：

form {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  display: inline-block;
  background: #f4f7f8;
  border-radius: 0 0 20px 20px;
}

.center_form {
  position: relative;
  width: 50%;
  display: inline-block;
  height: auto;
  text-align: center;
  border-radius: 20px;
  box-shadow: 1px 1px 15px 1px black;
}

.center_form--header {
  position: relative;
  border-radius: 20px 20px 0 0;
  z-index: 5;
}

#formtitlebg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://i.postimg.cc/bw0JjXgn/8-bit-game-wallpaper-42148.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px 20px 0 0;
  filter: blur(2px);
  z-index: -1;
}

#formtitle {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 2% 0;
  border-radius: 20px 20px 0 0;
  text-transform: uppercase;
  font-family: 'Press Start 2P', cursive;
  font-size: 15px;
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
}

.center_form--elements input[type="text"] {
  position: relative;
  width: 90%;
  margin: 2% auto 0;
  display: block;
  border: none;
  outline: none;
  border-bottom: 1px solid #ddd;
  background: #f4f7f8;
  font-size: 18px;
  padding: 10px 0;
}

.center_form--elements input[type="submit"] {
  position: relative;
  margin: 3% 0;
  box-shadow: 1px 1px 15px 1px black;
  background-color: #1A1D1E;
  border: 1px solid #1A1D1E;
  cursor: pointer;
  color: #FFFFFF;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 14px;
  padding: 1% 5%;
  text-decoration: none;
  text-transform: uppercase;
}

<div class="center_form">
  <div class="center_form--header">
    <div id="formtitlebg"></div>
    <h2 id="formtitle">Press start!</h2>
  </div>
  <form>
    <div class="center_form--elements">
      <input placeholder="Name" type="text">
      <input placeholder="Email" type="text">
      <input type="submit" value="START">
    </div>
  </form>
</div>

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