[css]최상위(맨위)에 보이게 하기

블로그 내 사이드 바를 꾸미던 중 두개의 div 태그 두개가 겹쳐져 원하는 것이 맨위로 올라오지 않는 현상 발생함.

         수정전                   수정후

수정 전에 이전글이 블로그 메뉴에 가려져 보이지 않았는데 수정 후 맨위에 올라와있는 것을 확인 할 수 있습니다.

 

위와 같이 최상위에 보이는 작업이 필요한 경우엔 태그에 css z-index 를 사용하면 됩니다. 

최상위(맨위)로 올리기 위해서는 css에 z-index를 가장 높게 설정하면 됩니다.

 

예를 들어 첫번째라는 div태그를 맨 위로 올려 보고 싶을땐 다른 태그보다 높게 설정하면 맨 위에서 확인 가능합니다.

<div style="position: relative; z-index: 2;">
 첫번째
</div>

<div style="position: relative; z-index: 1;">
 두번째 
</div>

 

z-index가 적용되지 않을 경우

1. 태그에서 position: relative;  설정이 되어있는 지 확인.
2. 위에서 먼저 z-index 설정, 적용된 z-index가 있는지 확인.
3. css 적용 우선순위에서 밀린경우

css 적용 우선순위는 아래와 같습니다.

1. 속성 값 뒤에 !important 를 붙인 속성
2. HTML에서 style을 직접 지정한 속성
3. #id 로 지정한 속성
4. .클래스, :추상클래스 로 지정한 속성
5. 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성