반응형
z-index
-
CSS 기본 Position : Z-index, Display요소(Inline, Block, Inline-block)컴퓨터 알아가기/HTML CSS 2021. 3. 30. 19:30
▒ Z-Index 지난시간까지 CSS에서 블록이 형성된 박스형의 위치에 대해 알아 보았습니다. 그런데 웹페이지상 블록이 형성된 영역(Box나 Contents 등)이 불가피하게 서로 겹쳐지게 되어 내용을 보기에 어려움을 겪을때가 있습니다. 이럴 경우 Z-index 속성을 사용하여 영역의 위치를 조절할 수 있습니다. 엑셀을 사용하시는 분들은 그림이 겹칠경우 맨위로 보내기, 맨 아래로 보내기 등의 기능을 아실겁니다. 그런 속성을 Z-index가 담당합니다. 예를 들어 지난시간에 아래 그림과 같은 블록을 공부해 봤습니다. 그런데 만일 하늘색 영역이 중요한 타이틀을 나타내고 파란색 영역에 방해를 받지 않기 위해서 맨 위로 보내고 싶은 경우 다음과 같이 CSS에 Z-index값을 줄 수 있습니다. 상기 예에서 보면..