<!DOCTYPE html>
<html lang="ko">
<head>
<title> fixed </title>
<link rel="stylesheet" href="reset.css">
<style>
/* absoulte, relative 문서 영역 기준 (일단은 body영역을 기준)
fixed 화면 영역기준 (브라우저를 기준으로) ex)위로, 아래로, 퀵메뉴
여백을 주는 경우 브라우저 or body를 기준으로 한다
*/
/* 1. */
/*
#s1 ul{background-color: brown; }
#s1 li:nth-child(1){background-color: red;}
#s1 li:nth-child(2){background-color: green;
--position: absolute;
--position: relative;
position: fixed;
left: 100px;
top: 100px;
}
#s1 li:nth-child(3){background-color: blue;} */
/* 2.화면 하단에 고정 */
/* #s1 ul{background-color: brown; }
#s1 li:nth-child(1){background-color: red;}
#s1 li:nth-child(2){background-color: green;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
#s1 li:nth-child(3){background-color: blue;} */
/* 3.부모 포지션 지정, 브라우저 화면을 기준으로 보기 때문에 어떠한 부모에게도 종속되지 않음 */
#s1 ul{background-color: brown; position: relative; height: 300px; }
#s1 li:nth-child(1){background-color: red;}
#s1 li:nth-child(2){background-color: green;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
#s1 li:nth-child(3){background-color: blue;} */
</style>
</head>
<body>
<!-- 고정위치 positon: fixed -->
<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>
<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>
<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>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
</body>
</html>