4. position / display

💨 Position 

◾ static

 

모든 태그들은 처음에 position: static; 상태이다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. 

◾ relative 

 

static 을 기준으로 태그의 위치를 옮기고 싶을 때 사용한다. 상하좌우 다 움직일 수 있다. 

 

◾ absolute

 

static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 

부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.

 

❗ absolute가 되면 div 태그를 지니고 있어도 width: 100% 가 아니다. 

 

 

#absolute 는 조상 태그에 position: relative 인 것이 없기 때문에 body를 기준으로 가장 오른쪽에 지정된다. 

#child 는 조상 태그에 #parent가 있고 position: relative 상태이기 때문에 그것을 기준으로 가장 오른쪽으로 지정된다.

 

◾ fixed

 

말 그대로 고정된다. 그렇기 때문에 스크롤을 움직여도 화면에 계속 고정되어 보이게 된다. 

네비게이션 메뉴를 이용할 때 좋다.

 

---

💨 Display

◾ none 

 

말그대로 보이지 않게 한다.

 

◾ block 

 

가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈 된 것처럼 보인다.

width / height 을 지정할 수 있다. 또한 block 요소 뒤에 등장하는 태그가 그 이전 block 요소의 오른쪽에 배치 될 수 있어도 항상 다음 줄에 렌더링된다.

 

 

✅ div, p, h, li 태그 등이 여기에 해당한다.

◾ inline

 

글자나 문장에 효과를 주기 위해 존재하는 단위.

block과 달리 줄 바꿈이 되지 않고, width와 height을 지정할 수 없다. 

 

✅ span, a 태그 등이 여기 해당된다.

 

---

💨 출처

 

https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1