Cascading, position

Cascading

 

여러 CSS가 적용된 하나의 요소에, 어떤 스타일이 적용될 지 정해지는 과정

 

1. user agent stylesheet(브라우저 기본 스타일) 은 CSS 스크립트보다 우선 순위가 낮음.

2. HTML style attribue는 우선 순위가 가장 높음.

3. 동일한 요소에 대한 여러 CSS규칙이 있을때,  가장 나중에 정의된 스타일이 우선 순위가 높음.

4. 명시도 점수 순에 따름.(https://specificity.keegan.st/)

 

position

 

HTML요소들을 기존위치로부터 자유롭게 만들기 위한 속성

 

1. static

1.기본 포지션 값, 요소의 원래 위치에 배치.

2. relative

1. 요소의 원래 위치를 기준으로 이동가능.

2. 요소의 원래 자리는 그대로 차지하고 있으며, 다른 요소에 영향을 주지 않음.

3. absollute

1. 포지셔닝이 되어있는 자신의 조상요소을 기준으로 위치를 지정.

2. 원래 있던 자리를 차지하지 않고 다른 요소에 영향을 주지 않음.

4. fixed

1. 브라우저 화면을 기준으로 요소를 고정함, 원래 요소의 자리를 차지하지 않으므로 뒤에 다른 요소가 가려질 수 있음.

 

5. stiky

1. static 처럼 원래 위치에 배치되어 있다가, 스크롤로 요소를 넘어가면 fixed처럼 다른요소를 밀어내지 않으면서 고정됨 원래 있던 자리를 계속 차지하고 있음.