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应该包含在同一容器中，容器占据可用高度的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>

Answer 3

这是可行的。

诀窍是将中间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>

自定义布局z-index

3 个答案: