[HTML/CSS] position 특징

이번 글은 position의 특징에 대한 정리글이다.

---

 

 

[ 특징 1 ]

position은 부모 요소에 relative, 자식 요소에 absolute를 정확하게 작성해줘야한다.

 

[ 특징 2 ]

아래 사진과 같이 계층구조가 3단계인 코드가 있을 경우

빨간 border에 position을 relative, 노란 border와 초록 border엔 absolute를 준다.

이때 노란 border에 relative를 써주진 않았지만 초록 border와 부모-자식관계이므로 position : relative의 역할도 암묵적으로 가능하게 된다.

 

[ 특징 3 ]

position 속성 적용 무조건 해당 요소의 display가 inline으로 변경된다.

따라서 크기를 다시 변경해줘야한다.

(ex. width:100%로 크기 채워주기)

원래 이미지로 텍스트를 가리고 있었는데 position 적용으로 크기값이 사라짐

width: 100% 적용

 

---