z-index：-1怎么没用？

m0035***

无标题文档

html,body{
            height:100%;
            height:100%;
}

.wrap{
            position:relative;
            width:300px;
            height:300px;
            background:#fff;
            box-shadow:0px 0px 4px rgba(0,0,0,0.3),
                                 0px 0px 40px rgba(0,0,0,0.1) inset ;
         left:50%;
            top:50%;
            font-size:30px;
            line-height:300px;
            text-align:center;
            transform:translate(-50%,-50%);
}

.wrap::before,.wrap::after{
            content:"" ;
            position:absolute;
            z-index:-1;       /* 问题：这里给长方形阴影设置了z-index:-1属性，为什么它会显示在正方形阴影的上方,文字的下方？而不是显示在正方形阴影的下方呢？我想让这个长方形阴影显示在最下方的，哪里出了问题啊？*/
            box-shadow:0 0  20px rgba(0,0,0,0.8);
            top:50%;
            bottom:0;
            left:10px;
            right:10px;
            border-radius:100px/10px;

}

Hello World!

m2141***

不要用transform:translate(-50%,-50%);

乐***

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

已有账号？

找人解决需求

z-index：-1怎么没用？

全部参与2

热门问答

m0035***

今日需求悬赏

今日问答求助

发布任务需求已有1031166位用户正在使用天盟网服务

新手帮助

平台规则

关于天盟

一键快捷导航

微信公众号

手机客户端