날나리 강좌. ㅋ 레이아웃 짜기, 광고 영역(?)

또 하나 처리할 것은 z-index의 초기값 auto에 대한 이해야. 광고 컨텐츠를 가장 밖에서 둘러싼 div의 position 속성 값은 absolute로 하면서 해당 위치에 다음 따라오는 블록 요소가 이들이 없는 것처럼 서로 겹치게 되어 있어. 그런데 누가 위에 올라온 것일까? 

결과를 먼저 적으면 광고 영역은 이런 흐름과 달리 중첩된 다음 블록보다 위에 있게 돼. 보기에는 광고 영역의 배경이 투명이어서 이를 바로 확인 못했을 뿐이야. 이렇게 가리면 뒤에 있는 것들은 본래 중첩된 content는 클릭이 안되어서 문제가 발생하지. 그러나 IE는 IE9를 포함하여 투명인 배경이 위에서 겹칠때 독특하게 처리하고 있어. 마치 없다 듯이 뒤에 있는 것도 선택이 가능하지. 그렇지만 다른 브라우저는 이와는 달리 엄격하게 뒤에 있는 것을 선택할 수가 없어. 따라서 이어 오는 블록 요소와의 겹칠 경우, 누가 우선인지 명확히 결정해 놓아야겠지?

본래의 원칙대로 생각해보자. position의 기본 값은 static이야. 서로 동위에 겹치게 된다면 뒤에 오는 것이 우선하여 위로 올라오게 돼. 그러나 static이 아닌 경우는, 다른 static인 초기값에 대해서 자신이 위로 올라가는 선순위이 있어. 따라서 앞서 작성했던 것도 이러한 규칙에 따라 광고의 영역이 가리게 되었지. 이를 해결하기 위해서는 z-index를 사용하여 직접 결정하면 되는데, z-index는 static이 아닌 position에서만 작동하는 점이 있어.

그러나 굳이 z-index의 값으로 명확히 설정하지 않아도, static이 아닌 블록끼리 겹치면 역시 동위에서는 뒤에 것이 위로 올라오게 되었지. 다만 static은 그 이전에 순서에서 먼저 밀린 것이야. 그렇기에 이를 이해했다면 z-index의 값을 사용하지 않고 그저 content에서 relative만 설정하면 이제 content가 위에 올라오겠지?

또한 나온 김에 IE의 이러한 투명 영역처리가 관통해서 뒤에 있는 것을 선택가능한 점은 그리 좋은 것만은 아니야. 때로는 이를 방지하기 위해서 투명도가 아주 낮은 블록을 새로 생성해 가릴 수도 있으며, 다른 방법으로는 배경 자체를 투명 그림으로 사용하면 이련 효과도 사라지며, 한발 더 나아가 투명이 아닌 그림 파일이라도 보이지 않게 위치를 변경하는 트릭으로도 해결이 가능해. 

자아~ 이야기가 길어졌다. 이제 이해를 다했으면 한번 완성을 시켜보자. "

김군 왈, " 어...정리하면 간단하네. static 끼리는 동위에서는 뒤에 것이 우선. static이 아닌 것과 만나면 후순. 따라서 static이 아닌 것으로 이어지는 중첩을 설정하면 위로 올라오겠네. 으흥.. 기달려봐...  

다 했어.. "

A군 왈, " 헉헉헉.. 왜 항상 니가 옮기는데  내가 힘드냐... "

<결과: 폭은 쭐였음... >

----

다음 시간에....