Question

我必须在移动视图中为网页显示background-image个列表，其中每个都有一个特定的h1和中央div，我会在其中显示标题。使用背景图像堆叠在这些div的每一个上，有一个带有opacity: 0.5的黑色.square-container { min-height: auto; background-color: white; } .square { width: 100vmin; height: 100vmin; color: white; } .hover-square { background: black; width: 100vmin; height: 100vmin; margin-top: 0; margin-bottom: 4px; position: absolute; opacity: 0.5; } .square-logo { width: 12.5%; height: auto; margin-left: 50%; transform: translateX(-50%); } h1 { height: 87.5vmin; width: 100%; font-size: 36px; text-align: center; vertical-align: middle; line-height: 100vmin; margin: 4px auto; z-index: 10 !important; } .square h1.first { margin-top: 50px; margin-bottom: 4px; }以使图像更暗。

这是我的代码：

＆＃13;

<div class="square-container">
  <div class="square" style="background-color: #e74c3c">
    <div class="hover-square"></div>
    <h1 class="first">Case 1</h1>
    <img class="square-logo" src="//pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
  </div>
</div>

＆＃13;

div

＆＃13;

它正常工作，但标题保持在黑色z-index下方。我试图修改h1标记的{{1}}，但到目前为止我没有运气。您对如何解决此问题有所了解吗？

这是一个包含完整代码的JSFiddle。提前感谢您的回复！

Answer 1

只需使用position: relative

即可

<强> DEMO HERE

<强> CSS

h1 {
  position: relative;
  height: 87.5vmin;
  width: 100%;
  font-size: 36px;
  text-align: center;
  vertical-align: middle;
  line-height: 100vmin;
  margin: 4px auto;
  z-index: 10 !important;
}

Answer 2

要使[[0]]工作，您需要创建堆叠上下文，在这种情况下，最简单的方法是在z-index元素上设置position: relative。

DEMO

但如果你想在导航条下设置h1，那么你还需要在导航栏上设置更高的h1，这样如果z-index为10，则导航栏必须为11。

Answer 3

如果混合元素（兄弟姐妹），其中一些元素的位置不是static，那么它们最终会位于更高的层中，因此，在您的情况下，h1位于后面。

如上所述，要使z-index工作，它需要一个位置（static除外），尽管很少需要使用z-index，而是确保所有或没有，位置，所以在您的情况下，只需删除z-index并添加position: relative

即可

.square-container {
  min-height: auto;
  background-color: white;
}

.square {
  width: 100vmin;
  height: 100vmin;
  color: white;
}

.hover-square {
  background: black;
  width: 100vmin;
  height: 100vmin;
  margin-top: 0;
  margin-bottom: 4px;
  position: absolute;
  opacity: 0.5;
}

.square-logo {
  width: 12.5%;
  height: auto;
  margin-left: 50%;
  transform: translateX(-50%);
}

h1 {
  position: relative;
  height: 87.5vmin;
  width: 100%;
  font-size: 36px;
  text-align: center;
  vertical-align: middle;
  line-height: 100vmin;
  margin: 4px auto;
}

.square h1.first {
  margin-top: 50px;
  margin-bottom: 4px;
}

<div class="square-container">
  <div class="square" style="background-color: #e74c3c">
    <div class="hover-square"></div>
    <h1 class="first">Case 1</h1>
    <img class="square-logo" src="//pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
  </div>
</div>

如果hover-square的唯一目的是使square变暗，则可以使用伪元素，并保存一些标记并获得一些灵活性

.square-container {
  min-height: auto;
  background-color: white;
}

.square {
  position: relative;
  width: 100vmin;
  height: 100vmin;
  color: white;
}

.square::before {          /*  added/changed to pseudo */
  content: '';
  background: black;
  width: 100vmin;
  height: 100vmin;
  margin-top: 0;
  margin-bottom: 4px;
  position: absolute;
  opacity: 0.5;
}

.square-logo {
  width: 12.5%;
  height: auto;
  margin-left: 50%;
  transform: translateX(-50%);
}

h1 {
  position: relative;
  height: 87.5vmin;
  width: 100%;
  font-size: 36px;
  text-align: center;
  vertical-align: middle;
  line-height: 100vmin;
  margin: 4px auto;
}

.square h1.first {
  margin-top: 50px;
  margin-bottom: 4px;
}

<div class="square-container">
  <div class="square" style="background-color: #e74c3c">
    <h1 class="first">Case 1</h1>
    <img class="square-logo" src="//pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png">
  </div>
</div>

div系列，每个div都堆叠一个带透明度的黑色div，带有居中文本

3 个答案: