Custom layout z-index - html

Question

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 ?

Answer 1

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.
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

as a starting point:
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.
using the .v-centered CSS class we can center elements vertically and horizontally inside of relative containers using : top:50% and transform: translateY(-50%) and horizontally margin: 0 auto.
the foreground has a higher z-index then other .v-centered content to appear on top
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.
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

Here's something that can work.
The trick is to set the middle div .button.-absolute to absolute positioning and make sure its placed within the upper black div .top-black. This element needs position: absolute 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. z-index: 10 to the element that needs to be on top. The gradient background can be achieved by using background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);
I hope this helps and here's it in action.
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>