z-index：-1怎么没用？

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> 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; } </style></head><body><div class="wrap">Hello World!</div></body></html>

查看完整描述

6 回答

已采纳

qq_非诚勿扰_3

TA贡献37条经验获得超16个赞

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

1 反对回复 2016-08-12

qq_非诚勿扰_3
这个涉及到层叠上下文的概念，transform会创建层叠上下文

回复 2016-08-12
qq_非诚勿扰_3
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> html,body{ height:100%; height:100%; } .bigwrap{ position:relative; background-color:red; 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 ; top:50%; margin-left:auto; margin-right:auto; font-size:30px; line-height:300px; text-align:center; } .wrap{ margin-top:-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; } </style> </head> <body> <div class="bigwrap"> <div class="wrap">Hello World!</div> </div> </body> </html> 试试这个居中的写法

回复 2016-08-12
Candy3610866
非常感谢，从你这我不仅又学到了一个居中的方法，还有 .wrap{ margin-top:-50%; } 这句代码，让我知道了原来在一些情况下，子元素设置margin-top,会对父元素造成影响。

回复 2016-08-13

点击展开后面4条

慕标2337738

TA贡献23条经验获得超13个赞

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

1 反对回复 2016-08-12

qq_非诚勿扰_3
你这个仅仅只适用于同级的定位元素，这个问题的主要原因是有没有生成新的层叠上下文

回复 2016-08-12

慕仰3254058

TA贡献1条经验获得超1个赞

z-index的数值必须是正整数

1 反对回复 2016-08-12

qq_非诚勿扰_3
请你好好弄明白再来回复好吗，不然很容易对人家产生误导

回复 2016-08-13

热搜

最近搜索清空

z-index：-1怎么没用？

z-index：-1怎么没用？

6 回答

添加回答