老师，请问about区域中间图片为什么设置了z-index不起作用呢？
来源：2-10 作业题
Big_one123
2019-08-13 23:45:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页布局</title>
<link rel="stylesheet" type="text/css" href="css/homework.css">
</head>
<body>
<!--顶部-->
<div class="top">
<div class="logo"><a href="#"><img src="images/logo.png"></a></div>
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!--banner图-->
<div class="banner">
<div class="image"><img src="images/banner3.jpg"></div>
<div class="opacity"></div>
<form class="message">
<input type="text" name="user" placeholder="your Name" class="text">
<input type="text" name="Phone" placeholder="your Phone" class="text">
<input type="text" name="email" placeholder="your Email" class="text">
<textarea name="jieshao" placeholder="Write Your Comment Here"></textarea>
<input type="submit" name="button" value="SEND MESSAGE" class="submit">
</form>
</div>
<!--ABOUT区-->
<div class="about">
<div class="a-top">
<h1>ABOUT</h1>
<hr>
<p>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.
</p>
</div>
<div class="a-middle">
<div class="m-left">
<div class="title">
<h1>A WORD ABOUT US</h1>
</div>
<div class="word">
<P>Praesent dignissim viverra estf sed
bibendum ligula congue non.Sed ac nisi
et felis gravida commodo? Suspendisse
eget ullamcorper ipsum.Suspendisse
diam amet
</P>
<button>EXPLORE</button>
</div>
</div>
<div class="m-middle">
<img src="images/bb3.jpg">
</div>
<div class="m-right">
<div class="above">
<h1>70000</h1>
<hr/>
<p>students</p>
</div>
<div class="below">
<h1>600</h1>
<hr/>
<p>faculty</p>
</div>
</div>
</div>
<div class="a-bottom"></div>
</div>
<!--GALLERY区-->
<div class="gallery"></div>
<!--页脚区-->
<div class="footer"></div>
</body>
</html>
/*全局重置样式*/
*{
margin:0;
padding: 0;
font-family: "Microsoft YaHei UI";
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/*顶部样式*/
.top{
width: 100%;
height: 80px;
background: #07cbc9;
position: fixed;
top:0;
z-index: 999;
}
.top .logo{
width:100px;
height: 50px;
padding:15px 50px;
float: left;
}
.top .nav{
height: 80px;
padding-right: 50px;
float: right;
}
.top .nav ul li{
float: left;
padding: 0 15px;
font:bold 18px "Microsoft YaHei UI";
line-height: 80px;
text-align: center;
}
.top .nav ul li a{
color: #ffffff;
}
.top .nav ul li:hover{
background: black;
}
/*banner图样式*/
.banner{
margin-top: 80px;
width: 100%;
height: 800px;
position: relative;
}
.banner .image img{
width: 100%;
height:800px;
}
.banner .opacity{ /*遮罩层*/
width: 100%;
height: 800px;
background: black;
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
}
.banner .message{
width: 509px;
height:371px;
position: absolute;
top:50%;
left: 50%;
margin-top: -186px;
margin-left: -255px;
}
.banner .message .text{
width: 505px;
height: 39px;
border:#7d7d7d 2px solid;
margin-bottom: 20px;
background:transparent;
color: #ffffff;
}
.banner .message textarea{
width: 505px;
height: 115px;
border:#7d7d7d 2px solid;
margin-bottom: 20px;
background:transparent;
color: #ffffff;
}
.banner .message .submit{
width: 123px;
height: 39px;
border:#7d7d7d 2px solid;
background:transparent;
color: #ffffff;
margin-left: 194px;
}
.banner .message .text:hover{
border:#07cbc9 2px solid;
}
.banner .message textarea:hover{
border:#07cbc9 2px solid;
}
.banner .message .submit:hover{
border:none;
background:#07cbc9;
}
/*about区样式*/
.about{
margin-top: 50px;
width: 100%;
}
.about .a-top{
width: 1000px;
height:150px;
margin:0 auto;
}
.about .a-top h1{
font:bold 40px "Microsoft YaHei UI";
text-align: center;
}
.about .a-top hr{
width: 40px;
height: 2px;
background: #07cbc9;
border: none;
margin:20px auto;
}
.about .a-top p{
font:16px "Microsoft YaHei UI";
text-align: center;
color: #7d7d7d;
}
.about .a-middle{
width: 1090px;
height: 380px;
margin:30px auto;
position: relative;
}
.about .a-middle .m-left{
width: 372px;
height: 340px;
float: left;
z-index: 888; /*为什么设置了z-index不起作用*/
}
.about .a-middle .m-left .title{
width: 186px;
height: 90px;
}
.about .a-middle .m-left .title h1{
font:30px "Microsoft YaHei UI";
text-align: center;
}
.about .a-middle .m-left .word{
width: 370px;
height: 246px;
border: 1px solid;
background: #ffffff;
opacity: 0.7;
}
.about .a-middle .m-left .word p{
padding:25px;
font:16px/1.5em "Microsoft YaHei UI";
}
.about .a-middle .m-left .word button{
margin-left: 25px;
width: 102px;
height: 45px;
color: #ffffff;
background: #000;
}
.about .a-middle .m-left .word button:hover{
background: transparent;
color: black;
border: 1px solid;
}
.about .a-middle .m-middle{
float: left;
position: absolute;
top:0;
left: 248px;
z-index: 777; /*为什么设置了z-index不起作用*/
}
.about .a-middle .m-middle img{
width: 568px;
height: 380px;
}
.about .a-middle .m-right{
width: 238px;
height: 144px;
float: left;
position: absolute;
top: 0;
left: 850px;
}
.about .a-middle .m-right .above{
width: 238px;
height: 144px;
border: #07cbc9 1px solid;
}
.about .a-middle .m-right .above h1{
font: bold 30px "Microsoft YaHei UI";
padding: 20px 65px 20px 70px;
}
.about .a-middle .m-right .above hr{
width: 40px;
height: 2px;
background: #07cbc9;
border: none;
margin:0 auto;
}
.about .a-middle .m-right .above p{
font: 20px "Microsoft YaHei UI";
padding: 20px 65px 20px 80px;
}
.about .a-middle .m-right .below{
width: 238px;
height: 144px;
border: #07cbc9 1px solid;
margin-top: 30px;
}
.about .a-middle .m-right .below h1{
font: bold 30px "Microsoft YaHei UI";
padding: 20px 65px 20px 90px;
}
.about .a-middle .m-right .below hr{
width: 40px;
height: 2px;
background: #07cbc9;
border: none;
margin:0 auto;
}
.about .a-middle .m-right .below p{
font: 20px "Microsoft YaHei UI";
padding: 20px 65px 20px 90px;
}
1回答
-
你好同学，不是没有起作用，是因为中间图片部分设置了定位后，层级本身就比左边的文本框层级高，所以会把左边的文本框给遮住。你再给一个层级高的元素设置z-index之后，层级更高，那么还是会遮住文本框，没有任何意义哦。这里是想要文本框显示在上面，应该给文本框设置z-index ，让它层级大于中间的内容。如下设置：
去掉如下属性
给文本框设置定位与层级：
祝学习愉快，望采纳。
0
相似问题