about 区 上半部分的实现疑问？

你好，下面是我的 html 及对应的 css 代码：

about 区 上半部分的展示效果如图所示：无法层叠，当把 position 改为 absolute 则会导致宽度失效，位置错乱；

尝试过使用 float 以及 设置过 z-index ；还是无法达到作业要求的效果，请给予指点，谢谢！

<!-- about部分 -->
<div class="about">
	<div class="top">
		<h1>ABOUT</h1>
		<div class="line"></div>
		<p>
			Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.Lorem Ipsum has been the industry's standard dummy
            text ever since the 1500s.
		</p>
	</div>
	<div class="middle">
		<!-- middle 左侧文字区 -->
		<div class="left">
			<div><h2>A WORLD</h2><h2>ABOUT US</h2></div>
			<div class="text1">
				<div class="desc">
					Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo? Suspendisse diam amet.
				</div>
				<input type="button" value="EXPLORE">
			</div>
		</div>
		<!-- middle 中间图片区 -->
		<div class="middle-img">
			<img src="images/bb3.jpg">
		</div>
		<!-- middle 右侧文字区 -->
		<div class="right">
			<div class="text">
				<div><h2>70000</h2></div>
				<div class="line"></div>
				<div><h4>Students</h4></div>
			</div>
			<div class="text">
				<div><h2>600</h2></div>
				<div class="line"></div>
				<div><h4>Faculty</h4></div>
			</div>
		</div>
	</div>

/* about */
.about{
	width:100%;
	margin-top:50px;
	text-align: center;
	position: relative;
}

.about .top .line{
	width:20px;
	border-bottom:2px solid #07cbc9;
	margin:6px auto;
}

.about .top p{
	font-size:12px;
	width:350px;
	margin:0px auto;
	color:grey;
}

.about .middle{
	width:60%;
	border:1px solid #000;
	margin:20px auto;
}
/* about middle left */
.about .middle .left{
	text-align: left;
	float:left;
	width:35%;
}

.about .middle .left h2{
	font-weight: 50
}

.about .middle .left .text1{
	border:1px solid #ccc;
	z-index: 20;
	position:relative;
	left:-20px;
	padding:15px 20px 15px 20px;
	background: rgba(225,225,225,0.3);
	font-size: 15px;
	line-height: 22px;
	margin-top: 10px;
}

.about .middle .left input{
	font-size:12px;
	width:65px;
	height:30px;
	background-color: #000;
	color:#fff;
	border:none;
	margin-top:15px;
}
/* about middle img */
.about .middle .middle-img{
	margin:0 auto;
	position: relative;
	z-index: 10;
	top: 0;
}
/* about middle right */
.about .middle .right .text{
	border:1px solid #07cbc9;
	line-height:30px;
	width:100px;
	padding:10px 20px;
	list-style-type: none;
	margin:0 auto 30px 20px;
}

.about .middle .right .line{
	width:20px;
	border-bottom:2px solid #07cbc9;
	margin:0 auto;
}