首頁猿問 z-index：-1怎么沒用？

z-index：-1怎么沒用？

CSS3

Candy3610866 2016-08-12 15:17:54

<!doctype html><html><head><meta charset="utf-8"><title>無標(biāo)題文檔</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; ? ? ? ? /* 問題：這里給長方形陰影設(shè)置了z-index:-1屬性，為什么它會顯示在正方形陰影的上方,文字的下方？而不是顯示在正方形陰影的下方呢？我想讓這個(gè)長方形陰影顯示在最下方的，哪里出了問題?。?/???????????? 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貢獻(xiàn)37條經(jīng)驗(yàn) 獲得超16個(gè)贊

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

1 反對回復(fù) 2016-08-12

qq_非誠勿擾_3
這個(gè)涉及到層疊上下文的概念，transform會創(chuàng)建層疊上下文

回復(fù) 2016-08-12
qq_非誠勿擾_3
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標(biāo)題文檔</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; /* 問題：這里給長方形陰影設(shè)置了z-index:-1屬性，為什么它會顯示在正方形陰影的上方,文字的下方？而不是顯示在正方形陰影的下方呢？我想讓這個(gè)長方形陰影顯示在最下方的，哪里出了問題啊？*/ 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> 試試這個(gè)居中的寫法

回復(fù) 2016-08-12
Candy3610866
非常感謝，從你這我不僅又學(xué)到了一個(gè)居中的方法，還有 .wrap{ margin-top:-50%; } 這句代碼，讓我知道了原來在一些情況下，子元素設(shè)置margin-top,會對父元素造成影響。

回復(fù) 2016-08-13