Contents
포지션(position)
- position은 기본적인 속성은 static이다. → position: static; (기본 속성이라 생략 가능) → 일반적인 문서의 흐름에 따라 자연스럽게 흘러가는 속성이다.
- 출력 예시
출력 코드
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { width: 300px; height: 300px; background-color: yellow; display: inline-block; } .box2 { width: 300px; height: 300px; background-color: red; display: inline-block; } .box3 { width: 300px; height: 300px; background-color: green; display: inline-block; } .box4 { width: 300px; height: 300px; background-color: blue; display: inline-block; } .box5 { width: 300px; height: 300px; background-color: bisque; display: inline-block; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>
- relative → position: relative; → 내 앞에 있는 엘레멘트의 상대적 위치를 결정한다.
- 출력 예시
출력 코드
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { width: 300px; height: 300px; background-color: yellow; display: inline-block; } .box2 { width: 300px; height: 300px; background-color: red; display: inline-block; position: relative; top: 100px; left: 100px; } .box3 { width: 300px; height: 300px; background-color: green; display: inline-block; } .box4 { width: 300px; height: 300px; background-color: blue; display: inline-block; } .box5 { width: 300px; height: 300px; background-color: bisque; display: inline-block; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>
- absoulte → position: absoulte; → 도화지를 한 장 더 얹어서 그 위에 그림을 그리는 것 (Z 인덱스)
- 출력 예시
출력 코드
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { width: 300px; height: 300px; background-color: yellow; display: inline-block; } .box2 { width: 300px; height: 300px; background-color: red; display: inline-block; position: absolute; top: 100px; left: 100px; } .box3 { width: 300px; height: 300px; background-color: green; display: inline-block; } .box4 { width: 300px; height: 300px; background-color: blue; display: inline-block; } .box5 { width: 300px; height: 300px; background-color: bisque; display: inline-block; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>
모든 그림을 그리는 시스템은 자식을 먼저 그리고 부모를 그린다.
그로인해 그림이 아래처럼 그려진다.
출력 2
출력 코드
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { width: 300px; height: 300px; background-color: yellow; display: inline-block; } .box2 { width: 300px; height: 300px; background-color: red; display: inline-block; } .box3 { width: 300px; height: 300px; background-color: green; display: inline-block; } .box4 { width: 300px; height: 300px; background-color: blue; display: inline-block; } .box5 { width: 100px; height: 100px; background-color: bisque; display: inline-block; top: 50px; left: 50px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"> <div class="box5"></div> </div> </body> </html>
출력 1
출력 코드
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { width: 300px; height: 300px; background-color: yellow; display: inline-block; } .box2 { width: 300px; height: 300px; background-color: red; display: inline-block; } .box3 { width: 300px; height: 300px; background-color: green; display: inline-block; } .box4 { width: 300px; height: 300px; background-color: blue; display: inline-block; position: relative; } .box5 { width: 100px; height: 100px; background-color: bisque; display: inline-block; position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"> <div class="box5"></div> </div> </body> </html>
→ 부모를 relative를 걸고 자식을 absolute를 걸면 부모 안에서 자식이 놀게 된다. (문법)
→ 자식 absolute는 부모 relative 안에서 논다.
- fixed → position: fixed; → 화면의 스크롤을 내려도 위치가 고정되게 하는 것 → 브라우저를 기준으로 위치를 고정
Share article
