[CSS] 겹치거나 넘치는 요소 다루기(z-index, overflow)

position을 사용하다보면 요소가 겹치면서 보여야 할 요소가 가려지거나 겹치는 경우가 생긴다.
보여야할 요소의 우선순위를 정하기 위해 z-index를 사용한다.

코드 예시

.container {
	position: relative;
}
example1 {
	z-index: 1;
}

example2 {
	z-index: 2;
}
...

position을 지정한 요소에 한해서 우선순위를 정할 수 있다. z-index값이 높은 순서대로 위쪽에 위치하게 되며 꼭 1부터 시작하지 않아도 숫자값이 높기만 하다면 상관없다.

다음은 overflow이다.
overflow는 한 엘리먼트 안에 있는 콘텐츠가 너무 많아 엘리먼트 밖으로 밀려났을 경우 사용한다.
어떤 속성의 overflow를 사용하느냐에 따라 보여지는 내용의 형태가 달라진다.

• visible: 기본값. 영역을 벗어난 콘텐츠를 그대로 보여준다.
• hidden: 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 한다.
• scroll: 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 하고 잘려진 콘텐츠 진행 방향으로 스크롤을 만든다.
• auto: 웹 브라우저의 설정 값을 따른다. 보통 스크롤을 사용하는 경우가 많다.

코드 예시

example1 {
	overflow: hidden;
}

example2 {
	overflow: scroll;
}

example3 {
	overflow: auto;
}

출처: https://dev.to/neshaz/the-guide-to-css-overflow-property-mg3