css__ z-idex 속성
코드 설명
dashed-box 라는 div를 만들어서 position:relative를 주고
나머지 span에게 position:absolute를 줌.
여기서 Gold box에 z-index=50 , Green box에 z-index=0 을 지정해주면 Gold box가 앞으로 오는 걸 알 수 있다.
(레이아웃 같은 개념)
z-index는 숫자가 높은게 앞에 오고 낮으면 뒤로 간다고 생각하면 된다.
Gold box와 Green box의 z-index값을 바꾸면 Green box가 앞으로 오게 된다
setting code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./test.css" /> <title>Document</title> </head> <body> <div class="dashed-box"> Dashed box <span class="gold-box">Gold box</span> <span class="green-box">Green box</span> </div> </body> </html>
.dashed-box { position: relative; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; margin-right: 30px; } .gold-box { position: absolute; z-index: 50; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 0; /* put .green-box above .dashed-box */ background: lightgreen; width: 50%; left: 65%; top: -25px; height: 7em; opacity: 0.9; }
