about区遮罩层优先级问题

<!-- ABOUT区域 -->
        <div class="about">
        	<!-- 标题 -->
        	<h1 class="tit">ABOUT<h1>
        	<!-- 横线 -->
        	<h1 class="line">___</h1>
        	<!-- 文本 -->
        	<div class="ab-contain">Lorem Ipsum is simply dummy text of the printing and typesetting
        	<br/>industry.Lorem Ipsum has been the industry's standard dummy<br/>text ever since the 1500s.
            </div>
            <!-- 图片部分 -->
            <div class="img-middle">
            	<!-- 中间图片部分 -->
            	<div class="middle-con"><img src="images/bb3.jpg"/></div>
            	<!-- 左边图片部分 -->   	
            	<div class="left-con">
            		<!-- 标题文字部分 -->
            		<div class="con-word">
            			<div class="word1">A WORD </div>
            		    <div class="word2">ABOUT US</div>
            		</div>
            		<!-- 图框遮罩层 -->
            		<div class="con-mix-layer"></div>
            		<!-- 图框部分 -->
            		<div class="con-mix"><P>Praesent dignissim viverra est ,sed bibendum ligula congue non.
            		Sed ac nislet felis gravida commodo?Suspendisseeget ullamcorper ipsum.
            	    Suspendissediam amet</P>
            	    <div class="con-bot"> <button >EXPLORE</button></div>
            	    </div>
            	</div>
            	<!--右边文字部分 -->
            	<div class="right-con">
            		<!-- 上图框部分 -->
            		<div class="con-show">
            			<div class="num">70000</div>
            			<div class="line">_____</div>
            			<div class="att">Students</div>
            		</div>
            		<!-- 下图框部分 -->
            		<div class="con-show">
            			<div class="num">600</div>
            			<div class="line">_____</div>
            			<div class="att">Faculty</div>
            		</div>
            	</div>
            </div>
            </div>

css

/*about区域横线部分*/
.main .about .line{
	text-align: center;
	color:#07cbc9;
	margin-bottom: 30px;
	line-height: 20px;
 }
 /*about区域标题部分*/
 .main .about .tit{
 	text-align: center;
 	padding-top: 30px;
 }
 /*about区域文字部分*/
 .main .about .ab-contain{
 	text-align: center;
 	color: gray;
 	margin-bottom: 20px;
 }
 /*about区域图片部分中间图片*/
 .main .about .img-middle img{
 	width: 600px;
 	height: 400px;
 }
 /*about区域图片设置*/
 .main .about .img-middle .middle-con{
 	text-align: center;
 }
 /*about区域图片部分左侧图片*/
 .main .about .img-middle .left-con .con-mix{
 	width:350px;
 	height: 200px;
 	border:1px solid gray;
 	z-index: 1;
 }
 /*about区域图片部分左侧图片文字部分*/
 .main .about .img-middle .left-con .con-mix p{
 	padding:20px;
 }
 /*about区域图片部分左侧图片按钮部分*/
 .main .about .img-middle .left-con .con-bot button{
 	height: 35px;
 	width: 80px;
 	background-color: black;
 	color: #ffffff;
 	border:0;
 } 
 /*about区域图片部分左侧图片按钮部分*/
 .main .about .img-middle .left-con .con-bot{
 	padding-left:20px;
 }
 /*about区域图片部分左侧图片标题部分*/ 
 .main .about .img-middle .left-con .con-word{
 	line-height: 40px;
 	font-size: 40px;
 }
 /*about区域图片部分左侧图片标题部分*/ 
 .main .about .img-middle .left-con .con-word .word1{
 	padding-left: 20px;
 	padding-bottom: 10px;
 }
 .main .about .img-middle .left-con .con-word .word2{
 	padding-left: 3px;
 	padding-bottom: 10px;
 }
 /*把图片设置为祖先元素*/
 .main .about .img-middle{
 	position: relative;
 }
 /*中间图片部分向左浮动*/
 .main .about .img-middle .left-con{
 	position: absolute;
 	top:0;
 	left:15%;
 }
 /*图框遮罩层处理*/
 .main .about .img-middle .left-con .con-mix-layer{
 	width:350px;
 	height: 200px; 
 	position:absolute;
 	padding-right: 2px;
 	padding-bottom: 2px;
    background-color:#ffffff;
    opacity: 0.5;
    z-index: 0;
 } 
 /*about区域图片部分右侧图框部分*/
 .main .about .img-middle .right-con .con-show{
    width: 200px;
    height: 100px;
    border:1px solid #07cbc9;
    text-align: center;
   margin-bottom: 25px;
 }
 /*about区域图片部分右侧图框数字部分*/
 .main .about .img-middle .right-con .con-show .num{
 	padding-top: 13px;
 	font-size: 30px;
 	font-weight: bold;
 	line-height: 30px;
 }
 /*about区域图片部分右侧图框横线部分*/
 .main .about .img-middle .right-con .con-show .line{
    font-size: 20px;
    margin-top:-10px;
    margin-bottom: 15px;
 }
 /*about区域图片部分右侧图框文字部分*/
 .main .about .img-middle .right-con .con-show .att{
 	font-size:20px;
 	line-height: 20px;
 }
/*about区域图片部分右侧图框整体*/
 .main .about .img-middle .right-con{
 	width: 202px;
 	height: 400px;
 	position: absolute;
 	top:0;
 	right:15%;
 }

设置了/*about区域图片部分左侧图片*/
.main .about .img-middle .left-con .con-mix{
width:350px;
height: 200px;
border:1px solid gray;
z-index: 1;
}优先级怎么遮罩层还是显示在上面？