自定义布局 z-index

Question

我需要有关此自定义布局的帮助。有人能告诉我如何为这 3 个 div 创建 css 代码并得到这个结果吗？

Answer 1

考虑到您没有任何代码可以开始，这里是一个起点。请注意，其中很多都有供应商前缀，其中可能有编写它们的简写方式（填充、边距等）。我只是为了视觉目的把所有东西都写出来了。

div{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top: 50px;
  padding-bottom: 50px;
}

h1{
  text-align: center;
}

.black{
  position: relative;
  background: black;
  width: 100%;
  height: 100%;
}

h1.black{
  color:white;
}

.white{
  position:relative;
  background: white;
  width: 100%;
  height: 100%;
  border: 3px solid black;
}

div.overlay{
  margin-top:140px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
  width: 50%;
  float: center;
  border: 3px solid silver;
  background: linear-gradient(silver,#A9A9A9);
  position: absolute;
  border-radius: 20px;
}

<div class="wrapper">
  <div class="black">
    <h1 class="black">Div 1</h1>
  </div>
  <div class="white">
    <h1> Div 2</h1>
  </div>
  <div class="overlay">
    <h1>Div 3</h1>
  </div>
</div>

Answer 2

这是可行的。

诀窍是将中间 div .button.-absolute 设置为绝对定位，并确保其放置在上部黑色 div .top-black 内。这个元素需要position: absolute 才能工作。由于它的绝对定位，使用底部和左侧将其对齐在两种颜色相遇的折叠处。还不需要 z-index，但是如果您看到其他项目与它们重叠，请添加更高的值，例如z-index: 10 到需要在顶部的元素。渐变背景可以使用background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);实现

我希望这会有所帮助，这就是行动。

body {
  font-size: 2rem;
}

.top-black {
  text-align: center;
  position: relative;
  background-color: #333333;
  width: 100% min-height: 225px;
  content: ' ';
}

.bottom-white {
  text-align: center;
  background-color: #ffffff;
  width: 100% min-height: 200px;
  border: 1px solid #ccc;
}

.button {
  padding: 3rem 1rem;
  margin: 0 auto;
}

.button.-absolute {
  padding: 1rem 5rem;
  position: absolute;
  bottom: -2rem;
  left: calc(50% - 7.5rem);
  background-color: red;
}

.button.-filled {
  border-radius: 10px;
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0);
  /* IE6-9 */
}

.button.-white {
  color: #ffffff;
}

<div class="top-black">
  <div class="button -white">DIV I</div>
  <div class="button -absolute -filled">DIV I</div>
</div>
<div class="bottom-white">
  <div class="button">DIV I</div>
</div>

Answer 3

作为起点：

三个 div 应该包含在同一个容器中， 容器占用 100% 的可用高度并相对定位。 每个背景 div 占高度的 50%，并且也是相对定位的。

使用.v-centered CSS 类，我们可以使用top:50% and transform: translateY(-50%) 和水平margin: 0 auto 在相关容器内垂直和水平居中元素。

前景的 z-index 高于其他出现在顶部的 .v-centered 内容

您可以看到的问题是背景 div 的内容在 div 内部居中并且没有考虑前景 div 的高度，这是因为它是绝对定位的，如果您的中心 div 始终相同的高度，您可以在背景内容中添加填充以解决该问题。

html, 
body {
  height:100%;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
}
.container {
  text-align:center;
  height:100%;
  position:relative;
}
.color--dark {
  background: black;
  color:white;
}

.color--light {
  background: white;
}

.background {
  position:relative;
  height :50%;
}

.v-centered {
  position: absolute;
  top:50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
}

.foreground {
  width:60%;
  background:grey;
  padding:10px;
  border-radius: 20px;
  z-index:2;
}

<div class="container"> 
  <div class="background color--dark"> 
    <span class="v-centered"> DIV 1 </span>    
  </div>
  
  <div class="foreground v-centered"> DIV 2 </div>
  
  <div class="background color--light">   
    <span class="v-centered"> DIV 3 </span>    
 </div>
</div>