① position 속성
position: static;: 요소를 문서 흐름에 맞추어 배치 (기본값)position: relative;: 이전 요소 (보통 부모 요소)에 맞추어 자연스럽게 연결하여 위치를 지정position: absolute;: 원하는 위치를 지정해 배치position: fixed;: 지정한 위치에 고정하여 배치position: sticky;: 위치에 따라서 동작 방식이 달라짐.
1. static
위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치
부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치
top, bottom, left, right를 같이 사용할 수 없으며 사용할 경우에는 무시됨.
2. relative (상대 위치)
static으로 지정되었을 때의 기본 위치를 기준으로 top, bottom, left, right와 같은 좌표 속성을 사용하여 위치를 이동
<head>
<style>
body { margin: 0; }
.parent {
width: 150px;
height: 150px;
background: #bcbcbc;
border: 1px solid #bcbcbc;
margin: 50px;
}
.relative-box {
position: relative;
top: 50px; left: 50px;
background: #2E303D;
color: #e55c3c;
font-weight: bold;
text-align: center;
line-height: 150px;
}
</style>
</head>이 경우, parent 클래스의 자식인 relative-box 클래스 요소의 width, height가 부모 요소와 동일하다. width, height의 경우 상속되지 않기에 이는 상속에 의한 것이 아니다. relative를 적용한 요소는 좌표 property가 적용되는 것 이외의 것들은 static을 지정했을 때와 같기 때문이다.
3. absolute (절대 위치)
position: static; 속성을 가지고 있지 않은 부모 또는 가장 가까운 조상 요소를 기준으로 움직임
부모나 가장 가까운 조상 요소 중, position이 relative, absolute, fixed인 요소가 없다면 body가 기준이 됨
다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 됨
absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width 지정하는 것이 필요
4. fixed (고정 위치)
부모 요소와 관계 없이 브라우저의 viewport를 기준으로 top, bottom, left, right을 사용하여 위치를 이동
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치
fixed 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width 지정하는 것이 필요
② z-index 속성
z-index 속성에 큰 숫자값을 지정할수록 화면 전면에 출력
position 속성이 relative, absolute, fixed인 경우에만 적용
③ overflow 속성
overflow: visible;: 영역을 벗어난 부분을 표시 (기본값)overflow: hidden;: 영역을 벗어난 부분을 잘라내어 보이지 않게 함overflow: scroll;: 영역을 벗어난 부분이 없어도 스크롤 표시overflow: auto;: 영역을 벗어난 부분이 있을 때만 스크롤 표시
특정 방향으로만 스크롤을 표시하고자 할 때는 overflow-x overflow-y 속성 사용
🎁 참조 및 출처
