시작 하기전에 기본적은 CSS에서의 block과 inline에 대해서 알아둘 필요가 있습니다.
div는 기본적으로 설정을 하지 않으면 block 입니다. 설정을 하지 않으면 기본적으로 한라인을 다 차지 한다는 의미 입니다.
span은 기본적으로 inline 특성을 가지고 있습니다. 컨텐츠의 크기 만큼만 차지를 합니다.
물론 위 요소에 대한 특성을 변경이 가능 합니다. 아래 포지션에 대해 테스트 하기 전에 이런 특성을 알고 있는것이 중요 합니다.
보통 확인을 할때는 style의 값을 "border: 1px solid black" 이런 형태로 박스를 쳐서 확인 합니다.
▶ 포지션의 특성은 아래 4가지가 있다.
static, relative, fixed, absolute,stickey
그리고 각각 위치정보를 top, bottom, left, right 값을 가지고 있는데 위 특성에 따라서 다른 값을 가지게 된다.
top : 위(상단)에서 얼마나 떨어 트릴것인가?
bottom : 바닥에서 얼마나 떨어 트릴 것인가?
left : 왼쪽에서 얼마나 떨어 트릴 것인가?
right : 오른쪽에서 얼마나 떨어 트릴 것인가?
1) static
디폴트 설정 값으로 위에서 부터 아래로 순서대로 배열을 해준다. 그리고 각 위치 정보값을 무시 하는 속성 값이다.
> 기준이 없고 배치가 불가능 하다.
2) relative
상대적인 포지션을 가지게 해준다. 위치를 변경할 수 있다. 상대적인 위치를 가질 수 있어 top, bottom, left, right 값 설정이 가능하다.
top 이른 left든 값을 주면 다른것 위에 올라가든 아래로 올라가든 겹치는 기능을 가지고 있다. 즉, 다른것과 충돌?이 생길경우 밀리거나 하지 않는다는 것이다. 중첩 되는 특성을 가진다.
> 요소 자신을 기준으로 배치가 된다.
3) fixed
화면에 보이는 위치가 기준이 된다. 한번 결정 되면 스크롤이 되도 처음 그자리 그대로 있다. 절대적인 위치 설정이 된다는 의미다.
> 뷰포트 기준으로 배치가 된다.
4) absolute
부모의 요소와 관련하여 상대적인 위치가 결정 된다. 부모가 없다면 <body>가 기준이 되어 설정 된다. 상대적인 위치에 고정 된다.
우리가 흔히 메인에서 보는 슬라이드 배너에서 화살표에 해당하는것을 만들 수 있다. 이것은 relative 과 헷갈릴 수 있는데요. 2개 이상을 설정해 보면 쉽게 구분이 갑니다.
> 부모(상위)를 기준으로 배치가 된다.
5) stickey
스크롤 영역을 기준으로 배치가 된다. 스크롤 이동 하면 지정한 위치에 도달 했을때 fixed 처럼 작동을 하게 됩니다.
마지막으로 직접 테스트 할때 어디 부터 시작 되는지 구분이 잘 안가는 경우는 박스를 구분하게 하고 시작 위치를 0으로 주면 확인하기 수월합니다.
-----------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="euc-kr">
<title>css postion test</title>
</head>
<body>
<!-- sticky
스크롤 한번 내리면 0px로 착 붙는것을 볼 수 있다.
top, bottom, left, right 하나는 반드시 지정을 해줘야 한다.
이것의 특징은 설정한 위치에 닫으면 fixed 처럼 된다.
-->
<div id="test0" style="border: solid 1px red; width: 500px; height: 400px; text-align: end; position: relative; overflow: auto;">
<div style="background-color: tomato;">첫번째</div>
<div style="border: solid 1px gray; width: 300px; height: 100px; position: sticky; left: 10px; top: 11px;">최종1-0</div>
<div style="background-color: tomato; height: 200px;">두번째</div>
<div style="background-color: brown; height: 200px;">세번째</div>
첫번째 요소
</div>
<p></p>
<!-- 포지션을 absolute 설정 -->
<!--
부모의 특성에 따라 같이 이동됨을 알 수 있다.
공간을 차지 않는다. 그래서 아래 "최종2"가 위치가 변경 된다.
위치에 대한것을 확인 하는 방법은 박스의 색을 다르게 한 다음. 0px를 주면 된다. 그러면 어디서 부터 시작하는지 쉽게 알 수 있게 된다.
상위로 올라가다가 static 속성이 아닌 첫번째 것을 기준으로 위치가 잡힌다.
일반적으로 이 absolute 속성을 사용 할때는 부모의 속성을 relative 으로 설정 하는 경우가 많습니다.
-->
<!-- <div id="test0" style="border: solid 1px red; width: 500px; height: 500px; text-align: end;">
<div id="test00" style="border: solid 1px gray; width: 200px; height: 200px; position: absolute; left: 0px; top: 55px;">최종1-0</div>
<div id="test1" style="border: solid 1px green; width: 400px; height: 400px; position: relative; top: 10px; left: 33px;">
<div id="test21" style="border: solid 1px gray; width: 200px; height: 200px; position: absolute; left: 10px; top: 55px;">최종1-1</div>
<div id="test22" style="border: solid 1px palevioletred; width: 200px; height: 200px; position: absolute; left: 12px; top: 56px; text-align: right;">최종2</div>
</div>
최상위 박스 absolute
</div> -->
<!-- 포지션을 relative 설정 -->
<!-- 부모의 특성에 따라 같이 이동됨을 알 수 있다. -->
<div id="test0" style="border: solid 1px red; width: 500px; height: 500px; text-align: end;">
<div id="test1" style="border: solid 1px green; width: 400px; height: 400px; position: relative; left: 33px;">
<div id="test21" style="border: solid 1px gray; width: 200px; height: 200px; position: relative; left: 33px; top: 55px;">최종1</div>
<div id="test22" style="border: solid 1px palevioletred; width: 200px; height: 200px; text-align: right;">최종2</div>
</div>
최상위 박스 relative
</div>
<!--
포지션을 fixed 설정
<div id="test00" style="border: solid 1px gray; width: 111px; height: 20px;">width 크기</div>
브라우저의 어디서 부터 시작하는지 알기 위한것이다. 부모의 설정과 무관하다는 것을 알 수 있다.
스크롤을 움직여 보면 그 자리 그대로 있다는 것을 알 수 있다.
<div id="test01" style="border: solid 1px blue; width: 200px; height: 200px; position: fixed; left: 0px; top: 111px;">최종1-1</div>
<div id="test01" style="border: solid 1px brown; width: 200px; height: 200px; position: fixed; left: 111px; top: 88px;">최종1-2</div>
<div id="test0" style="border: solid 1px red; width: 500px; height: 500px; text-align: end;">
<div id="test1" style="border: solid 1px green; width: 400px; height: 400px; position: relative; left: 10px; top: 10px;">
<div id="test21" style="border: solid 1px gray; width: 200px; height: 200px; position: fixed; left: 111px; top: 55px;">최종1-3</div>
<div id="test22" style="border: solid 1px palevioletred; width: 200px; height: 200px; text-align: right;">최종2</div>
</div>
최상위 박스
</div> -->
<p></p>
<!-- 포지션 특성을 설정하지 않은 상태 -->
<div id="test0" style="border: solid 1px red; width: 500px; height: 500px; text-align: end;">
<div id="test1" style="border: solid 1px green; width: 400px; height: 400px;">
<div id="test21" style="border: solid 1px gray; width: 200px; height: 200px; top: 22px;">최종1</div>
<div id="test22" style="border: solid 1px gray; width: 200px; height: 200px; text-align: right;">최종2</div>
</div>
최상위 박스
</div>
</body>
</html>
