- absolute, relative : 문서영역 기준 (일단은 body영역을 기준)
- fixed : 화면 영역 기준 (브라우저를 기준으로)
ex) 위로, 아래로, 퀵메뉴 등등
- relative : 본인의 자리가 살아있다.
- absolute : 본인 자리는 사라진다.
- fixed : 수직 스크롤으로 방향을 변경해도 자리는 고정
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
#s1 yl{background-color: darkgoldenrod;}
#s1 li:nth-child(1) {background-color: dodgerblue;}
#s1 li:nth-child(2) {background-color: hotpink;
left: 100px;
top: 100px;
position: fixed;}
#s1 li:nth-child(3) {background-color: thistle;}
</style>
</head>
<body>
<section id="s1">
<h1>position:fixed</h1>
<ul>
<li>개나리</li>
<li>진달래</li>
<li>라일락</li>
</ul>
</section>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
</body>
</html>

화면하단에 고정
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul{background-color: aquamarine;}
#s1 li:nth-child(1){background-color: darkseagreen;}
#s1 li:nth-child(2){
background-color: darkcyan;
position: fixed;
bottom: 0;
width: 100px;
height: 80px;}
#s1 li:nth-child(3){background-color: darksalmon;}
</style>
</head>
<body>
<section id="s1">
<h1>position:fixed</h1>
<ul>
<li>개나리</li>
<li>진달래</li>
<li>라일락</li>
</ul>
</section>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
</body>
</html>

부모포지션 지정
브라우저 화면을 기준으로 보기 때문에 어떠한 부모에게도 종속되지 않는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href=reset.css">
<style>
#s1 ul{background-color: yellow; position: relative; height: 300px;}
#s1 li:nth-child(1){background-color: darkgrey;}
#s1 li:nth-child(2){
background-color: dodgerblue;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;}
#s1 li:nth-child(3) {background-color: darkslategray;}
</style>
</head>
<body>
<section id="s1">
<h1>position:fixed</h1>
<ul>
<li>개나리</li>
<li>진달래</li>
<li>라일락</li>
</ul>
</section>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
</body>
</html>

'CSS' 카테고리의 다른 글
[CSS] z-index (0) | 2024.06.01 |
---|---|
[CSS] sticky (0) | 2024.06.01 |
[CSS] relative (0) | 2024.05.31 |
[CSS] absolute (0) | 2024.05.31 |
[CSS] static (0) | 2024.05.31 |