안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
문서 상 배치를 결정하는 속성
① static (기본값)
- 문서에 정의된 대로 배치하는 속성
- float 등을 이용하여 좌우배치
- offset(left, top, right, bottom) 무시
② relative
- 문서에 정의된 대로 배치하는 속성
- offset(left, top, right, bottom) 을 적용
③ absolute
- 요소를 겹쳐서 표현 가능
- 가장 가까운 static이 아닌 부모요소 기준 offset을 적용
④ fixed
- viewport 기준으로 offset 적용
⑤ sticky
- relative처럼 작동하다 특정 offset(top:0px)에 다다르면 fixed처럼 작동
static
HTML 코드
<h2>static</h2>
<div class="outer">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
CSS 코드
<style>
.outer {
background-color: lightgray;
border: 1px solid black;
margin-bottom: 200px;
}
.first {
width: 300px;
height: 300px;
background-color: thistle;
}
.second {
width: 200px;
height: 200px;
background-color: violet;
/* offset 설정 */
left: 50px;
top: 50px;
}
.third {
width: 100px;
height: 100px;
background-color: magenta;
left: 100px;
top: 100px;
}
</style>
.second와 .third에 대하여 left/top offset을 적용하였지만, 적용되지 않았으며 문서에 정의된 대로 배치된 것을 확인할 수 있습니다.
relative
HTML 코드
<h2>relative</h2>
<div class="outer">
<div class="first"></div>
<div class="second relative"></div>
<div class="third relative"></div>
</div>
CSS 코드
<style>
.outer {
background-color: lightgray;
border: 1px solid black;
margin-bottom: 200px;
}
.first {
width: 300px;
height: 300px;
background-color: thistle;
}
.second {
width: 200px;
height: 200px;
background-color: violet;
/* offset 설정 */
left: 50px;
top: 50px;
}
.third {
width: 100px;
height: 100px;
background-color: magenta;
left: 100px;
top: 100px;
}
.relative {position: relative;}
</style>
static과 달리 .second와 .third에 적용한 offset이 적용된 것을 확인할 수 있습니다.
또한 마찬가지로 문서에 정의된 대로 배치되었습니다.
absolute
HTML 코드
<h2>absolute</h2>
<div class="outer">
<div class="first"></div>
<div class="second absolute"></div>
<div class="third absolute"></div>
</div>
CSS 코드
<style>
.outer {
background-color: lightgray;
border: 1px solid black;
margin-bottom: 200px;
}
.first {
width: 300px;
height: 300px;
background-color: thistle;
}
.second {
width: 200px;
height: 200px;
background-color: violet;
/* offset 설정 */
left: 50px;
top: 50px;
}
.third {
width: 100px;
height: 100px;
background-color: magenta;
left: 100px;
top: 100px;
}
.absolute {position: absolute;}
</style>
offset을 적용했던 .second와 .thrid가 부모인 .outer를 탈출해버렸습니다.
그 이유는, 가장 가까운 static이 아닌 부모요소를 기준으로 offset이 적용되기 때문입니다.
현재 부모요소인 .outer는 position을 지정하지 않았으므로 기본값인 static이 적용되어 있습니다.
따라서 그 다음 부모인 <body>를 기준으로 offset이 적용되어버린 것이죠.
부모인 .outer 내에서 겹쳐진 요소를 표현하고 싶다면 .outer의 position을 지정해줘야 합니다.
<h2>absolute</h2>
<div class="outer relative">
<div class="first"></div>
<div class="second absolute"></div>
<div class="third absolute"></div>
</div>
fixed
HTML 코드
<h2>fixed</h2>
<div class="fourth fixed"></div>
CSS 코드
<style>
.fourth {
width: 100px;
height: 100px;
background-color: tomato;
right: 50px;
bottom: 50px;
border-radius: 50%;
}
.fixed {position: fixed;}
</style>
viewport를 기준으로 offset이 적용되기 때문에 viewport의 right 50px, bottom 50px 떨어진 부분에 대해 위치가 고정 되어 있는 것을 확인할 수 있습니다.
sticky
HTML 코드
<body>
<h2 class="sticky">static</h2>
<div class="outer">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
<h2 class="sticky">relative</h2>
<div class="outer">
<div class="first"></div>
<div class="second relative"></div>
<div class="third relative"></div>
</div>
<h2 class="sticky">absolute</h2>
<div class="outer relative">
<div class="first"></div>
<div class="second absolute"></div>
<div class="third absolute"></div>
</div>
<h2 class="sticky">fixed</h2>
<div class="fourth fixed"></div>
</body>
CSS 코드
<style>
.outer {
background-color: lightgray;
border: 1px solid black;
margin-bottom: 200px;
}
.first {
width: 300px;
height: 300px;
background-color: thistle;
}
.second {
width: 200px;
height: 200px;
background-color: violet;
/* offset 설정 */
left: 50px;
top: 50px;
}
.third {
width: 100px;
height: 100px;
background-color: magenta;
left: 100px;
top: 100px;
}
.fourth {
width: 100px;
height: 100px;
background-color: tomato;
right: 50px;
bottom: 50px;
border-radius: 50%;
}
.sticky {
position: sticky;
top: 0px;
background-color: rosybrown;
z-index: 999; /* z축 기준 값이 클수록 위에 위치 */
}
.fixed {position: fixed;}
.absolute {position: absolute;}
.relative {position: relative;}
</style>
relative처럼 동작되다가 특정 offset에 다다르면 fixed처럼 작동합니다.
따라서 top: 0px이 되었을 때는 고정된 것처럼 보입니다.
z-index값을 크게 주어 맨 앞에 위치하도록 하였습니다. (그렇지 않으면 요소 뒤로 감춰져버리는 경우가 있음)