[ position 및 relative,absolute,fixed,static 이해하기 ]
우리가 레이아웃을 만들때는 보통 CSS의 세가지 속성을 많이 사용합니다.
display, position, float 입니다. 이 세가지는 무척 중요하고 까다롭기도 합니다.
만약 위의 3가지를 정확히 이해하신다면 웹페이지의 Layout을 구성하는 것이 상당히 수월해지지 아닐까 생각합니다.
물론 저는 아직 초보라서 위의 세가지를 정확히 이해하지 못합니다.
다만 제가 아는 범위에서만 포스팅 하려고 합니다.
그럼 이전에 연재했던 display에 이어 position에 대해 알아보기로 하겠습니다.
Position
이 속성에는 여러가지 적용값이 있지만 가장 많이 사용하는 4가지만 알아보겠습니다.
static, relative, fixed, absolute
1. static
static는 default 값입니다.
이것이 무슨 말인가 하면 우리가 Html 태그를 사용할때 기본으로 들어가 있는 값입니다.
예를들면 <div>나 <div style="position:static">이나 같은 말입니다. 그냥 태그만 쓰면 static속성값이 들어가 있다고 보면 됩니다.
아래쪽으로 순차적으로 나타나죠.
<div style="position:static;background:blue;width:30px;height:30px;"></div>
** 결과 **
특별히 바뀐 것이 없죠. 그냥 순차적으로 아래로 나열됩니다.
따라서 이것은 위치값을 가지지 않습니다. 아래에 나올 다른 속성들은 left, top, right, bottom 등의 값을 가질수 있다는 것과 비교가 됩니다.
2. Relative
relative가 별도의 위치값을 갖지 않고 사용되면 static과 동일하게 작동합니다.
때문에 relative를 사용할때는 보통 top,right,left,bottom 등의 위치값과 같이 사용을 하게 됩니다.
위치값과 같이 사용될때 relative는 현재 태그의 위치를 기준으로 top이나 left등의 위치값 만큼 이동하게 됩니다.
다만, 자신의 태그를 감싸고 있는 부모태그가 있는 경우에는 부모태그를 기준점으로 잡고 이동 합니다.
.rel1 {position:relative;} .rel2 {position:relative; top:20px; left:20px;} </style>
<div class="rel1" style="background:red;width:30px;height:30px;"></div>
<div class="rel2" style="background:blue;width:30px;height:30px;"></div>
**결과**
첫번째 div는 위치값 없는 그냥 relative입니다. 이것은 static와 마찬가지로 현재는 아무런 역할을 안합니다.
두번째 div는 첫번째 div의 바로 밑(즉 현재의 div태그의 위치)에서 위에서 20px 만큼, 왼쪽으로 20px 만큼 이동해서 위치하게 됩니다.
3. Fixed
fixed는 말 그대로 모니터상에서 못 박히듯이 고정된 위치에서 움직이지 않는 속성이다. 위아래로 스크롤을 해도 항상 고정된 위치에 있는 것이다.
레이아웃의 copyright 부분인 footer 등에 쓸 수 있지만 모바일 브라우저에서는 좀 불안하므로 잘 생각해서 사용하세요.
.fix { position: fixed; bottom: 0; right: 0; width: 100px; border:3px solid #FDC72F; background-color: white; font-size:12px; }
</style>
<div class="fix">나는 fixed 입니다. 좀 있다 보죠.</div>
**결과**
결과는 페이지 오른쪽 하단에 있습니다.
fixed는 위치값을 가진 부모태그에 쌓여 있더라도 그걸 무시하고 자기가 가진 절대좌표로 무조건 이동합니다. 일종의 후레자식이라고나 할까....
4. Absolute
이 속성은 위치값(top,left...)이 없으면 그냥 현위치에 그냥 나타납니다. 만약 내 위치에 다른놈이 차지하고 있어도 그 위에 그냥 덮어서 나타납니다.<div style="position:absolute;background:blue;width:30px;height:30px;"></div>
나중에 작성된 파란박스가 앞의 빨간박스를 덮어 버렸습니다.
위치값이 있으면 fixed와 마찬가지로 웹페이지 상의 절대좌표로 이동합니다.
녹색박스를 찾아보세요. 대략 위의 녹색박스의 위치가 웹페이지 상단에서 3230px 왼쪽에서 300px 정도의 위치입니다.
absolute를 이용하여 웹페이지의 어디라도 절대적으로 위치시킬 수 있습니다.
<div style="position:absolute; left:100px;top:20px;background: red;width:30px; height:30px;"></div>
<div style="position:absolute; left:100px;top:50px;background: blue;width:30px; height:30px"></div>
</div>
위의 코드는 absolute가 부모태그에 감싸여졌을때를 나타냅니다.
부모태그 div에 "나는 너의 부모다"라는 표시라고 할수있는 position:relative가 absolute인 태그를 감싸고 있습니다.
부모태그를 기준으로 잘 위치해 있습니다. 그런데 만약에 위와 같이 absolute를 감싸고 있는 relative의 설정이 없다면, 두개의 absolute는 부모 Div태그를 뚫고서 자신의 절대주소(top:20px이나 top:50px)인 웹페이지의 상단으로 탈출하게 될 것입니다.
5. z-index
z-index는 position의 값이 absolute나 Fixed 등 강제적으로 위치를 지정할 때 많이 사용됩니다.
앞에서 설명드렸듯이 fixed나 absolute는 위치를 지정하면 아래에 있는 요소를 덮어버리면서 나타납니다. (예를 들면 드롭다운 메뉴같은 하위메뉴가 확장될때 아래의 콘텐츠를 덮어버리면서 메뉴가 나타나죠)
이렇게 요소들이 덮어지거나 겹쳐지는 경우 어떤 요소를 화면의 제일 앞으로 보여주고 싶은 경우에 사용합니다.
z-index값이 높을수록 앞에 나타납니다. z-index 값은 정수중에서 10만 이하의 아무런 숫자나 상관 없습니다. 10만이상도 되기는 되지만 단위가 높아지면 가독성이 좀 떨어져서... (ex, 10, 100, 20000 ...)
아래의 코드 CSS탭의 z-index값을 바꿔보면서 실험해보세요.
Z-index
원래는 더 길게 쓰려했는데 급 마무리 합니다..
즐거운 하루 되세요 Vanxy
