How to form a ladder-shaped web page

I have never noticed a little trick, today there is time, just record, first look at the effect!

1, first in the HTML body, put two div can

<title> New Document </title>
<meta name= "Generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<link href= "Style.css" type= "Text/css" rel= "stylesheet" >

<body>
<div class= "Div1" >div1</div>
<div class= "Div2" >div2</div>
</body>

2, then to design CSS style:

*{
padding:0px;
margin:0px;
}

. div1{
width:200px;
height:100px;
Background-color: #f2f6f8;
border:1px solid #000;
border-bottom:0px;
z-index:100;
position:relative;
Text-align:center;
line-height:80px;
}

. div2{
width:600px;
height:200px;
Background-color: #f2f6f8;
border:1px solid #000;
position:relative;
top:-2px;
Text-align:center;
line-height:180px;
}

Observe the green section of the code, set the bottom border of the Div1 to 0, and then, the DIV1 priority to improve some, so that can cover div2, in particular, z-index only with Position:relative/absolute, with the use of only valid, the last step , move the div2 up a little so that it can be completely covered.

How to form a ladder-shaped web page