z-index为什么没有作用？？？-慕课网

z-index为什么没有作用？？？

来源：1-7 曲线阴影

精慕门2297429

2015-08-11 16:08

效果是这样：

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>shadow</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
   <div>
   <h1 class="shadow effect">Shadow Effect</h1>
   </div>
</body>
</html>

CSS代码：

body{
font-family:"Microsoft YaHei";
font-size:25px;
margin:0;
padding:0;
}
.shadow{
width:80%;
height:200px;
text-align:center;
line-height:200px;
margin:40px auto;
background:#fff;
}
.effect{
background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset ;
-webkie-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
-o-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
position:relative;
z-index:100;
}
.effect:before,.effect:after{
content:"";
position:absolute;
z-index:-1;
top:50%;
bottom:0px;
left:5%;
right:5%;
box-shadow:0 0 20px rgba(0,0,0,0.8);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
-o-box-shadow:0 0 20px rgba(0,0,0,0.8);
border-radius:100px/10px;
-webkit-border-radius:100px/10px;
-moz-border-radius:100px/10px;
-o-border-radius:100px/10px;
background:red;
}

写回答关注

6回答

慕函数9666145

2016-10-07 18:44:13

你的class加到h1上了，应该加在div上

0 0
睡觉青蛙

2016-03-09 16:40:20

我也是，z-index无效

0 0
Desoer

2015-11-19 14:04:15

什么原因啊? 我的z-index=-1, 不管用啊！

0 0
夏小垣

2015-08-27 12:01:27

没事，应该的

0 0
夏小垣

2015-08-26 14:58:56

body{ font-family:Arial, Helvetica, sans-serif;
font-size:20px;}
body,ul{ margin:0; padding:0;}

.wrap{ width:70%;
height:200px;
margin:100px auto;}
.wrap h1{ font-size:20px;
text-align:center;
line-height:200px;}
.effect{
background:#fff;
position:relative;
box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.effect:after,.effect:before{
content:'';
position:absolute;
z-index:-1;
top:50%;
bottom:0;
left:20px;
right:20px;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
-o-box-shadow:0 0 20px rgba(0,0,0,0.8);
border-radius:100px/10px;}
你试试我的代码，我的可以了

1 0

精慕门229...

已自己找到问题了。。还是很感谢你

2015-08-26 21:46:48

共 1 条回复 >
夏小垣

2015-08-26 14:52:49

我的也是这样

0 0