천천히 알아가는 세상

안녕하세요. 이번에는 css의 z-index 기능에 대하여 알아보겠습니다. z-index 태그를 화면에 표시할 때 순서를 바꿀수 있는 속성이며, 태그의 position 값이 relative, absolute 인 경우에만 적용 가능합니다. z-index 값을 설정하지 않으면 기본 코드에 따라서 배치가 됩니다. 만약 부모의 z-index가 1이고 자식이 10이여도 부모를 따라가기 때문에 자식도 1을 받는다. 노란색 원에 z-index: 10 값을 지정하여 초록색 원 밑에 있어야할 노란색 원이 위로 배치된 모습입니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 초록색 원보다 위에 존재합니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 ..

안녕하세요. 이번에는 HTML에서 요소의 위치를 조정할 때 사용하는 기능에 속하는 CSS의 Position에 대해서 알아보겠습니다. Position HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 CSS 속성입니다. static, relative, absolute, fixed 속성이 존재합니다. position 속성은 요소의 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용합니다. 1. static 기본적으로 적용되는 값이며, 정적 방식에 해당 합니다. 2. relative 상대적 위치 방식으로 적용되는 속성이며, static 속성을 기준으로 상대적으로 위치를 이동한다. 2-1. Ex1) circle1 (빨간 원)에 relative 속성을 부여하면 ..