-
(52)CSS_z-indexHTML, CSS 2023. 4. 3. 16:42728x90
- CSS z-index 예제
- 아래 링크를 통해 태그 설명을 볼 수 있다.
- https://jm-rograming.tistory.com/74
(35)CSS_태그 설명
font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사
jm-rograming.tistory.com
<!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"><title>z-index</title><style>div#wrapper{position: relative;}div.box{position: absolute;width: 200px;height: 200px;border: 1px solid black;font-size: 25px;}#b1{left: 50px;top: 50px;background-color: deeppink;z-index: 10;}#b2{left: 120px;top: 70px;background-color: gold;z-index: 100;}#b3{left: 70px;top: 110px;background-color: greenyellow;z-index: 5;}</style></head><body><h2>z-index</h2><div id="wrapper"><div id="b1" class="box">1번째 div</div><div id="b2" class="box">2번째 div</div><div id="b3" class="box">3번째 div</div></div></body></html>
'HTML, CSS' 카테고리의 다른 글
(54)CSS_float2 (0) 2023.04.03 (53)CSS_float1 (0) 2023.04.03 (51)CSS_절대 위치 지정 방식 (0) 2023.04.03 (50)CSS_sticky (0) 2023.04.03 (49)CSS_고정 위치 지정 방식 (0) 2023.04.03