position
- static
- relative
- absolute
- fixed
- -webkit-sticky
<html>
<body>
<section id="static">
<div></div>
<div id="middle"></div>
<div></div>
</section>
<section id="relative">
<div></div>
<div id="middle"></div>
<div></div>
</section>
<section id="absolute">
<div></div>
<div id="middle"></div>
<div></div>
</section>
<section id="fixed">
<div></div>
<div id="middle"></div>
<div></div>
</section>
<p>lorem*100</p>
</body>
</html>
<--! css -->
div {
width: 100px;
height: 100px;
background-color: blue;
border: 2px solid black;
margin: 10px;
display: inline-block;
}
#middle{
background-color: green;
}
#static #middle {
position: static;
top: 100px;
}
// static으로 작성하면 position, top 위치에 아무 변화가 없다.
#relative #middle {
position: relative;
top: 100px;
left: 100px;
}
// top 으로 인해 100px 만큼 밑으로 이동한다.
// left 으로 인해 오른쪽으로 100px 만큼 이동한다.
// (음수로 작성하면 반대로 이동)
#absoulte {
position: relative; //alsoulte section을 조상으로 설정
}
#absolute #middle {
position: absolute;
top: 50px;
left: 50px;
}
// middle 은 문서에서 공간이 제거되어 세번째 div와 겹쳐진다.
// 이때 middle이 div 보다 먼저 작성되어 있어서 middle이 위로 겹쳐져 보인다.
// absolute는 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않는다.
// top, left를 추가하면 요소가 첫번째 section 쪽으로 이동한다.
// 공간이 제거되어도 가장 가까이 위치한 조상이 있다면 해당 조상을 기준으로 하거나
// 조상이 없다면 초기 컨테이너 블록인 <body> 기준으로 상대적인 위치에 배치된다.
// absolute section에 position을 relative로 설정하면
// absolute section이 조상이 되어,
// 조상인 absolute section을 기준으로 상대적 위치에 배치된다.
#fixed #middle {
position: fixed;
top: 0px;
left: 0px;
}
// top, left를 0으로 설정하면 컨테이너 블록의 맨 위로 이동한다.
// absoulte와 비슷하지만 조상 관계가 없다.
// fixed는 문서의 일반적인 흐름에서 요소가 제거되고 공간도 사라지며
// 초기 컨테이너 블록에서 상대적 위치에 배치된다.
// fixed section 아래에 많은 단락을 추가하고 스크롤 바를 내려도
// 문서 흐름에 상관없이 계속 같은 위치에 배치된다.
// 즉 컨테이너 상단으로부터 상대적 위치에 배치되며 계속 오프셋을 유지한다.
#sticky #middle {
position: -webkit-sticky;
top: 20px;
}
// sticky를 사용하면 처음엔 고정되지 않았다가 스크롤을 내리면 위치가 고정된다.
백엔드 개발 공부