这里的图片和文字设置了z-index，但是无法使文字浮于图片上方

<!DOCTYPE html>

<html>

<head>

<title>CSS布局</title>

margin: 0;

padding:0;

font-family:"Microsoft YaHei UI";

}

.header,.footer{background-color: #07cbc9;

width: 100%;height:80px;

line-height: 80px;color: #ffffff;

}

.footer{text-align: center;position: absolute;

bottom: 0; margin-top:80px;}

.logo{float: left;padding-top: 15px;}

.nav{float:right;padding-right: 100px;}

.nav ul li{ float: left;list-style: none;

padding-right: 20px;

}

.banner{width: 100%; overflow: hidden;

height: 635px;}

.banner .tu{width: 100%;height:635px;position: absolute;

top: 80px;

}

.banner img{width: 100%;height: 635px;}

.banner .toplayer{background-color: #000;width: 100%;

height:635px;

opacity:0.5;position: absolute;

top: 80px;

}

.banner .form{text-align: center;

height: 400px;width:800px;

position: absolute;

z-index: 2;top:50%;

left:50%;margin-top: -300px;

margin-left: -400px;

}

.banner .form .border{

background-color: transparent;

border: solid 1px white;height: 30px;

padding: 10px;

}

.banner .form .textarea{ background-color: transparent;

border: solid 1px white;color:#808080;

padding: 10px;padding: 10px;}

button{color:#808080;}

.clear{clear: both;}

.tou dt{font-weight: bolder;font-size: 30px;text-align: center;}

hr{border:1px solid #07cbc9;width: 25px;text-align:center;margin:7px auto 0;}

.tou dd{text-align: center;color:#808080;}

.about .small {overflow: hidden;height: 500px;}

.about .small .left,.middle,.right{float: left;padding: 20px;}

.about .small .left{margin-left: 450px;}

.about .small .left .l1{font-weight: bold;font-size: 22px;}

.about .small .left .l2{border: #808080 solid 1px;padding: 20px;background-color: transparent;font-size: 10px;height: 160px;}

.about .small .left .l2 .special{color: white;background-color: black;width: 100px;height: 50px;}

.about .small .middle{width: 600px;position: relative;left: -135px;}

.about .small img{height: 280px;width: 600px;z-index: -2;}

.about .small .right .r1,.r2{border: #07cbc9 solid 1px;width: 200px;height: 100px;text-align: center; margin-left: -150px;padding-top: 20px;padding-bottom: 0px;}

.about .small .right .r1{margin-bottom: 25px;}

.about .small .right .num{font-weight: bold;font-size:22px;}

.about .small .right .q{font-size:15px;}

</style>

</head>

<body>

</div>

<ul>

<li>ABOUT</li>

<li>FACULTY</li>

<li>GALLERY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ul>

</div>

bananer

<dl>

<dt>ABOUT</dt>

<hr>

<dd>

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.

</dd>

</dl>

</div>

<div class="l1">  A WORLD <br> ABOUT US</div>

<div class="l2">Praesent dignissim viverra est,sed<br>bibendum ligula congue non.Sed ac nisl<br>et felis gravida commodo?Suspendisse<br>eget ullamcorper ipsum.Suspendisse<br>diam amet.

<form>

<button name="EXPLORE" type="submit" value="EXPLORE" class="special">EXPLORE</button>

</form>

</div>

</div>

<hr>

<p class="q">Students</p>

</div>

<hr>

<p class="q">Faculty</p>

</div>

hfghfhfh

</div>

<dl>

<dt>GALLERY</dt>

<dd>

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.

</dd>

</dl>

</div>

vbcvbcb

</div>

</div>

</body>

</html>

慕用0863198 2018-11-18

源自：项目：网页布局案例 2-10 作业题

收起

1回答

好帮手慕星星 2018-11-19 15:07:06

你说的是about中间这个文字吧，

如果只给文字设置z-index是不能显示在图片上面的，因为文字是左侧left的子元素，子元素与父元素的同级不能比较z-index显示层级，所以可以使用定位来完成。让文字相对于left设置定位，参考：

给左侧left添加宽度以及相对定位：

给文字设置宽度，绝对定位以及显示层级：

自己完善测试下，祝学习愉快！

收起回答

提问者慕用0863198 #1

非常感谢。我这里还想询问下，是要先使left的层级高于Middle图片的层级，然后使，left中文字的层级高于left的层级，才会达到相应的效果是这样嘛？

2018-11-19 21:41:21
好帮手慕星星回复提问者慕用0863198 #2

z-index属性值只能在定位（除了static）的元素上生效，调整的是兄弟元素之间的显示层级，不能和其它元素来比较，所以在增加left中文字的显示层级即可。

2018-11-20 09:46:54