작성일자
카테고리 CSS/CSS기초

이전 글에서 상대위치(Relative Position)에 대해서 알아보고 제목타이틀에 상대위치를 적용해서 리본만들기를 해보았습니다. 이번 글에서는 포지션의 다른 속성인 절대위치(Absolute Position)를 이용한 포지션 방법과 고정위치(Fixed Position)을 이용해서 html 요소를 화면에 고정시키는 방법을 알아봅니다.

 

1. 절대위치를 이용한 요소의 포지션



첨부파일을 열어보면 html부분과 CSS부분이 좀 바뀌었습니다. 1은 2부분을 스타일링한 것인데 마우스 스크롤시 화면이 이동되는 것을 보기위한 용도로 삽입한 것입니다. div#third 는 두개의 클래스 div요소를 삽입하고 다시 각각의 요소에 <h2>태그로 숫자를 넣었습니다. 


우선 이전 글에서 한 내용을 기억을 되살려서 상대위치를 적용해봅니다. div#third에 대해서 포지션을 relative로 하고 left의 수치를 -200픽셀 설정했더니 요소 전체가 원래 있던 자리에서 좌측으로 200픽셀 이동했습니다. 그러면서 원래의 자리는 그대로 남아있습니다. 이처럼 상대위치는 이동을 하면 다른 형제요소와의 관계에서 상대적으로 위치를 변경합니다. 하지만 절대위치는 이동을 하면 원래의 자리는 보존하지 않고 이동을 하게 되며 부모요소의 포지션이 어떤 값을 갖느냐에 따라 달라집니다.


이번에는 relative 포지션을 비활성화하고 absolute를 활성화합니다. 수치는 left:200px;로 설정하니 원래의 있던자리에서 나와서는 화면끝에서 200픽셀 떨어진 부분에 위치하고 있습니다. 또한 원래의 자리는 아래에 있던 다른 요소가 자리를 차지했습니다. 이제 3의 요소는 원래의 부모요소와 상대를 하지 않고 루트요소인 body를 상대로 위치를 정하게 됩니다. 현재 body태그에는 어떤 포지션 설정이 되어있지 않지만 마지막 부모요소이므로 이 루트요소를 상대로 위치를 정하게 되는 것입니다. 그러면 3의 요소의 다른 부모요소에 포지션을 설정하면 어떻게 될까요.


직속 부모요소인 div#outer에 대해서 포지션을 relative로 설정했더니 이제는 부모를 찾아서 위치를 정합니다. 원래의 있던 자리에서 200픽셀 우측으로 이동한 것은 그대로이지만  이제는 body요소가 아니라 직속 부모을 상대로 위치를 정하는 것입니다. 하지만 원래의 자리를 보존하지 못하므로 다른 요소가 자리를 차지하는 것은 이전과 같습니다. 이처럼 절대위치는 자신의 부모요소가 포지션을 설정했는지에 따라서 상대적으로 자신의 위치를 찾게 됩니다. 하지만 다른 형제요소와의 관계에서는 절대적인 관계에 있으므로 형제요소와는 위치를 무시합니다.


이번에는 3개의 요소에 대해서 절대위치로 설정하고 각각의 위치는 left:0;, 200px, 400px로 설정했더니 7과 같이 나옵니다. 요소들이 나란히 배치되었습니다. 레이아웃에서 float를 설정한것과 마찬가지의 결과가 나옵니다. 이때 항상 부모요소는 포지션이 9처럼 relative로 되어있어야합니다. 안그러면 body요소를 상대로 위치를 잡게 됩니다.

이와같은 성질을 이용하면 이전글에서처럼 절대위치속성을 이용하여 제목에 리본만드는 작업을 할 수도 있습니다. 또한 본문에서 나와서 스크롤함에 따라 같이 움직이는 아이콘을 설정할 수도 있습니다.


현재 4와 5라은 숫자가 있는 box100 클래스 요소에 대해서 절대위치를 설정하고 수치는 -100픽셀로 했습니다. 절대위치를 설정했으니 부모요소에 상대위치를 설정해야하는데 직속 부모요소인 3에 설정해도 되고 할아버지 요소인 div#outer에 설정해도 같은 결과가 나옵니다. 지금 숫자가 5만 보이는데 이것은 두개의 숫자가 box100이라는 클래스에 의해서 절대 위치를 설정했으므로 자식요소도 상속을 받아 절대위치를 잡아서 겹쳐진 것입니다. 이런 기능은 본문의 밖에 어떤 아이콘을 배치한다든가하여 눈에 잘띄게 할때 사용합니다. 그러면 이렇게 본문에서 나와서 눈에 띄게 하는 것은 좋은데 스크롤을 하게 되면 다른요소와 함께 이동을 합니다. 이것을 화면에 항상 나오도록 고정시키려면 다음에 나오는 position:fixed;를 이용하면 됩니다.

2. 고정위치(Fixed Position)을 이용한 요소의 화면고정



box100에 대해서 포지션을 fixed로 바꾸고 수치를 left:0;으로 하면 5라는 요소는 화면 좌측끝에 바짝 붙어서 고정됩니다. 스크롤을 해도 움직이지 않습니다. 그런데 이요소는 원래 3의 요소 바로 아래에 있었기 때문에 3요소 이상으로는 올라가지 않습니다. 위로 위치를 변경하려면 3의 top에 수치를 입력하면 됩니다. top의 수치는 화면 상단을 기준으로 합니다. top:0;으로 하면 화면 상단에 붙게 되고 수치를 증가시킨 만큼 화면과 떨어지게 됩니다. bottom을 사용하면 화면 아래를 기준으로 합니다.


1처럼 bottom:0; 으로 설정했더니 화면 좌측 하단에 붙어서 스크롤해도 움직이지 않고 고정됩니다. 제 블로그의 화면 좌측에 붙어있는 뷰온버튼은 이러한 고정포지션을 사용한 것입니다. 뷰온버튼을 고정시키는 방법은 이곳을 참고하세요.  그리고 화면 스크롤함에 따라 애니메이션되는 트윗버튼은 CSS뿐만아니라 제이쿼리를 사용한 것이며 절대위치를 사용합니다. 이곳 을 참고하세요.
BlogIcon LittleStar

오오;; 절대위치와 고정위치라.... 이런 내용도 있네요~

매번 잘보고 가는데 도움이 되지 못해서 죄송합니다...ㅜ__ㅜ;;

항상 퀄러티 높은 포스팅 감사합니다~

링크 걸게요!!

BlogIcon 베누시안

안녕하세요. 단골 손님이시군요. 자주 찾아주셔서 감사합니다.

BlogIcon 이츠하크

가만있자. 요거 베누시안님 계속 기록해 놓으실 거죠. 두세번 봐서는 저의 경우는 무리... 여러번 공부해야 겠습니다. 이거 얼마나 좋은 교과서입니까? 마냥 고맙습니다. 마냥!!

BlogIcon 베누시안

안녕하세요. 글은 계속 진행됩니다. 그리고 보시다가 이해가 안되는 부분은 주저하지 마시고 의견을 달아주세요. 그리고 제 경험이라면 직접 코딩을 해보면서 웹브라우저에서 확인하는 과정이 중요하더군요. 좋게 평가해주시니 저도 너무 감사드립니다.

장군이

근데 position:fixed 를 해도 화면을 축소하면 홈페이지 내용과 겹치는데 이건 어쩔수 없는건가요 ?

어떻게 해야할 방법좀....ㅠㅠ 알려주세요

BlogIcon 베누시안

안녕하세요. 반갑습니다. 포지션 고정을 하면 화면 축소에 따라서 변경되지 않습니다. 화면축소되면서 본문영역과 겹치는 것은 어쩔수가 없죠.

김상균

휴..저는 개발자 인데 너무 어렵네요

BlogIcon 베누시안

안녕하세요. 개발하시는 분들은 CSS 레이아웃이 생소하죠.

조승태

아.. 정말 ...
책으로 나와도 전혀 손색이 없는 명강좌입니다.
손꾸락 두번 눌러도 되나요? ㅋ

BlogIcon 베누시안

정말 감사합니다.

티스토리 툴바