blocks|key|4081946|text|考虑到您没有任何代码可以开始，这里是一个起点。请注意，其中很多都有供应商前缀，其中一些可能有速记方式(填充、边距等)。我只是出于视觉的目的写下了所有的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4081947|​|4081948|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%25;
++height:+100%25;
}

h1.black{
++color:white;
}

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

div.overlay{
++margin-top:140px;
++padding-top:+0px;
++padding-bottom:+0px;
++padding-left:+10px;
++padding-right:+10px;
++width:+50%25;
++float:+center;
++border:+3px+solid+silver;
++background:+linear-gradient(silver,#A9A9A9);
++position:+absolute;
++border-radius:+20px;
}|code-block|syntax|javascript|4081949|<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>|4081950|4081951|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Considering you don't have any code to start with, here is a beginning spot. Note that a lot of these have vendor prefixes and may of these have shorthand ways of writing them (padding, margin etc..). I just wrote everything out for visual purposes.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div class="black"&gt;
    &lt;h1 class="black"&gt;Div 1&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="white"&gt;
    &lt;h1&gt; Div 2&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="overlay"&gt;
    &lt;h1&gt;Div 3&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4082001|text|这里有一些可以工作的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4082002|诀窍是将中间的div+.button.-absolute设置为绝对定位，并确保它位于上方的黑色div+.top-black内。此元素需要position:+absolute才能正常工作。由于它的绝对位置，使用底部和左对齐它在两个颜色的折叠会合。目前还不需要z索引，但如果您看到其他项与它们重叠，则向需要位于顶部的元素添加一个更高的值，例如z-index:+10。使用background:+linear-gradient(to+bottom,+#ffffff+0%25,+#cccccc+100%25);可以实现渐变背景|offset|length|style|CODE|4082003|我希望这能有所帮助，这就是它的实际效果。|4082004|​|4082005|body+{
++font-size:+2rem;
}

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

.bottom-white+{
++text-align:+center;
++background-color:+#ffffff;
++width:+100%25+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%25+-+7.5rem);
++background-color:+red;
}

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

.button.-white+{
++color:+#ffffff;
}|code-block|syntax|javascript|4082006|<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>|4082007|4082008|entityMap^0|0|B|H|1F|A|1W|I|4P|B|53|1T|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]|$D|Z|E|10|F|G]|$D|11|E|12|F|G]|$D|13|E|14|F|G]|$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|19|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$]]

<p>Here's something that can work.</p>

<p>The trick is to set the middle div <code>.button.-absolute</code> to absolute positioning and make sure its placed within the upper black div <code>.top-black</code>. This element needs <code>position: absolute</code> for this to work. Because of its absolute positioning use bottom and left to align it on the fold of the two colours meeting. No z-index is needed yet, but if you see other items overlapping them, add a higher value e.g. <code>z-index: 10</code> to the element that needs to be on top. The gradient background can be achieved by using <code>background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);</code></p>

<p>I hope this helps and here's it in action.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top-black"&gt;
  &lt;div class="button -white"&gt;DIV I&lt;/div&gt;
  &lt;div class="button -absolute -filled"&gt;DIV I&lt;/div&gt;
&lt;/div&gt;
&lt;div class="bottom-white"&gt;
  &lt;div class="button"&gt;DIV I&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4082066|text|作为起点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4082067|这三个div应该包含在同一个容器中，容器采用100%25的可用高度，并且是相对定位的。每个背景div采用50%25的高度，并且也是相对定位的。|4082068|使用.v-centered+CSS类，我们可以使用：top:50%25+and+transform:+translateY(-50%25)和horizontally+margin:+0+auto在相对容器中垂直和水平居中元素。|offset|length|style|CODE|4082069|与显示在顶部的其他.v-centered内容相比，前景具有更高的z索引|4082070|你可以看到的问题是背景div的内容在div中居中，没有考虑到前景div的高度，这是因为它是绝对的，如果你的中心div总是有相同的高度，你可以添加填充到背景的内容中来解决这个问题。|4082071|​|4082072|html,+
body+{
++height:100%25;
++font-family:+sans-serif;
++font-weight:+bold;
++font-size:+30px;
}
.container+{
++text-align:center;
++height:100%25;
++position:relative;
}
.color--dark+{
++background:+black;
++color:white;
}

.color--light+{
++background:+white;
}

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

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

.foreground+{
++width:60%25;
++background:grey;
++padding:10px;
++border-radius:+20px;
++z-index:2;
}|code-block|syntax|javascript|4082073|<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>|4082074|4082075|entityMap^0|0|0|2|B|Q|13|27|E|0|9|B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@$F|12|G|13|H|I]|$F|14|G|15|H|I]|$F|16|G|17|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@$F|19|G|1A|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1B|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1C|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1D|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|R|7|1E|8|@]|9|@]|A|$S|T]]|$1|W|3|O|5|6|7|1F|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|Y|$]]

<p>as a starting point: </p>

<p>the three div should be contained in the same container,
the container takes 100% of the availible height and is positioned relative. 
each background div take 50% of the height and are also positioned relative. </p>

<p>using the <code>.v-centered</code> CSS class we can center elements vertically and horizontally inside of relative containers using : <code>top:50% and transform: translateY(-50%)</code> and horizontally <code>margin: 0 auto</code>.</p>

<p>the foreground has a higher z-index then other <code>.v-centered</code> content to appear on top</p>

<p>the issue you can see is that the content of the background divs is centered inside the divs and does not take into account the height of the foreground div, this is because it is positionned in absolute, if your central div has always the same height, you could add padding to the content of the background to adress that issue.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt; 
  &lt;div class="background color--dark"&gt; 
    &lt;span class="v-centered"&gt; DIV 1 &lt;/span&gt;    
  &lt;/div&gt;
  
  &lt;div class="foreground v-centered"&gt; DIV 2 &lt;/div&gt;
  
  &lt;div class="background color--light"&gt;   
    &lt;span class="v-centered"&gt; DIV 3 &lt;/span&gt;    
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I need help with this custom layout. Can someone tell me how to create css code for those 3 div's and get this results ?</p>

<p><a href="https://i.stack.imgur.com/L6zm9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L6zm9.jpg" alt="enter image description here"></a></p>


Custom layout z-index

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问自定义布局z索引
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自定义布局z索引EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自定义布局z索引
EN