예제 5-6. z-index로 카드 쌓기
WEB/CSS3-CONCEPT 2017. 10. 31. 19:12 |6. 수직으로 쌓기, z-index
수직으로 쌓는 순서를 지정하는 프로퍼티로 값이 클수록 위에 쌓인다.
z-index의 지정이 없는 경우 HTML 문서에 나오는 순서대로 z-index 값이 자동 결정된다.
z-index는 position 프로퍼티가 relative나 absolute인 경우에만 작동한다.
예제 5-6. z-index로 카드 쌓기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>z-index 프로퍼티</title> <style> div { position : absolute; } img { position : absolute; } #spadeA { z-index :-3; left : 10px; top : 20px; } // z-index의 값이 클수록 밖(위)으로 저장된다. #spade2 { z-index : 2; left : 40px; top : 30px; } #spade3 { z-index : 3; left : 80px; top : 40px; } #spade7 { z-index : 7; left : 120px; top : 50px; } </style></head> <body> <h3>z-index 프로퍼티</h3> <hr> <div> <img id="spadeA" src="media/spade-A.png" width="100" height="140" alt="스페이드A"> <img id="spade2" src="media/spade-2.png" width="100" height="140" alt="스페이드2"> <img id="spade3" src="media/spade-3.png" width="100" height="140" alt="스페이드3"> <img id="spade7" src="media/spade-7.png" width="100" height="140" alt="스페이드7"> </div> </body> </html> | cs |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
| 예제 4-1. HTML 태그로만 작성한 웹 페이지 (0) | 2017.11.04 |
|---|---|
| 예제 5-8. overflow 프로퍼티 활용 (0) | 2017.10.31 |
| 예제 5-7. visibility로 텍스트 숨기기 (0) | 2017.10.31 |
| 예제 5-2. 정적 배치 - position : static(디폴트). 예제 5-3. 상대 배치 - position : relative. 예제 5-4. 절대 배치 - position : absolute. 예제 5-5. 고정 배치 - position : fixed. (0) | 2017.10.31 |
| 예제 5-1. display 프로퍼티로 박스 유형 설정 // 고치기 (0) | 2017.10.31 |