6-6. 웹 요소 위치 정하는 방법- position(static, relative, absolute, fixed)

1. 웹 요소의 위치를 정하는 left, right, top, bottom 속성

웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정해야한다. 

left : 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정한다. 

right : 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정한다. 

top : 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정한다. 

bottom : 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정한다. 

 

 

 

2. postion 

positon 속성을 이용하면 텍스트나 이미지를 나란히 배치할 수도 있고, 원하는 위치를 선택할 수 있다. 

 

postion 속성값 

1️⃣ static : 문서의 흐름에 맞춰 배치되는 기본값이다. 

2️⃣ relative : 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다. 

3️⃣ absolute : relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다. 

4️⃣ fixed : 브라우저 창을 기준으로 위치를 지정해 배치한다. 

 

 

 

 

❗❗❗❗

position 속성 중에서 absolute 값을 사용할 때는 주의해야한다. 

요소에 postion : absolute 라고 한 후 위칫값을 지정하면 요소 중에서 postion: relative 를 사용한 요소를 기준으로 위치를 결정한다. 

근데 만약 부모 요소 중에 없다면 상위 요소를 찾아보고, 그래도 없으면 더 위의 요소를 찾아본다.