-
CSS position 속성Front-End/jQuery 2012. 6. 27. 11:52
0. 기본 설정
xhtml 1.1 기준으로 작성되었으며,
브라우저간의 차이를 최대한 없애기 위해 border와 margin은 넣지 않았습니다.
div 0, 2, 3, 4, 5번의 크기는 가로세로 50px, 1번은 가로세로 150px이고
1번은 2, 3, 4번을 감싸고 있습니다.
border와 margin간의 차이는 추후 정리해서 올리도록 하지요~
예제 link : position.html
<DIV id=zero>000</DIV>
<DIV id=one>
<DIV id=two>222</DIV>
<DIV id=three>333</DIV>
<DIV id=four>444</DIV>
</DIV>
<DIV id=five>555</DIV>* { margin: 0; padding: 0; }
#zero {
background-color: #f00;
width: 50px;
height: 50px;
}
#one {
background-color: #555;
width: 150px;
height: 150px;
}
#two {
background-color: #ff0;
width: 50px;
height: 50px;
}
#three {
background-color: #0f0;
width: 50px;
height: 50px;
}
#four {
background-color: #00f;
width: 50px;
height: 50px;
}
#five {
background-color: #f0f;
width: 50px;
height: 50px;
}1. position: static;
기본적으로 style에 position을 따로 지정해주지 않아도 static을 갖습니다.
각 div 마다 position: static;을 주어도, 위의 기본 예제과 같은 렌더링을 보여줍니다.
static에는 top, left, bottom, right와 같은 offset 값을 줄 수 없습니다. 줘도 안먹습니다.
(참고로 bottom, right 는 absolute, fixed 에서만 표현됩니다.)
말그대로 "정적(靜的)위치"입니다.2. position: relative;
#zero {
position: relative;
top: 20px;
left: 20px;
}
#three {
position: relative;
top: 20px;
left: 20px;
}
#five {
position: relative;
top: 20px;
left: 20px;
}
div 0, 3, 5번 모두 "static일 때의 위치를 기준"으로
위에서 20px, 왼쪽에서 20px 만큼 벌어져 있는 것을 볼 수 있습니다.
또한, 원래 있었던 자리가 텅 비어있는 것을 확인할 수 있습니다. ( 1번(회색)과 4번 div의 위치를 주목하세요. )
있던 자리로 부터 움직이는, 말 그대로 "상대위치" 입니다.3. position: absolute;
#zero {
position: absolute;
top: 20px;
left: 20px;
}
#three {
position: absolute;
top: 40px;
left: 40px;
}
조금 복잡해 보이지만 간단합니다.
absolute를 준 것은 0번과 3번 두개 뿐 입니다.
0번에는 top, left 를 20px씩 주었고, 3번에는 40px씩 주었습니다.
relative와 차이점이 보이나요?
원래 0번과 3번이 차지하고 있던 자리가 감쪽같이 사라지고, ( 1번(회색)과 4번 div 위치를 주목하세요. )
"기준점이 브라우저 페이지 왼쪽 위 꼭지점"이 되어
0번은 20px씩 떨어지고 3번은 40px씩 떨어진채 위치하고 있음을 알 수 있습니다.
absolute 속성을 갖게 되면 normal flow에서 벗어납니다.
다시말해, 더이상 <body>안에 속해있지 않은 것 처럼 페이지 위에 붕 떠있습니다.
말 그대로 자기혼자 놀고있는 "절대위치"입니다.
사실 3번 div는 설명이 좀 더 필요한데요.
3번 div를 감싸고 있는 1번 div가 offset 값을 갖고 있지 않기 때문에 ( static이기 때문에 )
0번과 3번 둘다 브라우저 꼭지점을 기준으로 위치해 있는 것입니다.
만약. 1번이 top, left, bottom, right와 같은 offset 값을 가지고 있다면
즉, relative 이거나 absolute 이라면
3번은 어디에 위치하게 될까요?
#zero {
position: absolute;
top: 20px;
left: 20px;
}
#one {
position: relative;
top: 30px;
left: 30px;
}
#three {
position: absolute;
top: 40px;
left: 40px;
}
absolute 첫번째 렌더링과 비교해 보세요.
0번은 그대로 absolute 상황이며,
1번은 relative와 함께 위와 왼쪽 30px씩 떨어져 있습니다.
5번은 1번이 원래 위치하고 있던 간격을 그대로 떨어뜨린채 위치하고 있습니다.
반면, 3번은 어디에 있나요?
3번의 부모 element인 1번 div의 offset 값 ( top: 30px; left: 30px; )과
자신이 가지고 있는 offset값 ( top: 40px; left: 40px; ) 이 반영된 위치에 있는 것을 확인할 수 있습니다.
만약 의도와 달리 엉뚱한 곳에 div가 위치한다면
부모의 offset을 꼭 확인해주세요~
<추천 1.>
예제파일을 가지고 1번 div를 relative 말고 absolute로 줘 보세요.
또다른 재밌는 렌더링을 보여줄 겁니다. 5번 div 움직임 주목. -_-)=b 예상되시죠?
<추천 2.>
어느 div든지 absolute만 줘보세요.
offset 값은 삭제하고 말그대로 position: absolute; 만 줘 보세요.
이 경우 숨어버리는 div가 생겨버려서, 제대로 보려면 firebug가 필요하겠네요. (5번 제외)
아니면 div 크기를 다 다르게 줘도 괜찮겠네요.
상상이 된다면 당신은 이미 -_-)=b
절대 예제 만들기 귀찮아서 추천 날리는거 아닙니다.4. position: fixed;
아쉽게도 이것은 Internet Explorer 6 에서는 먹혀들지 않습니다.
IE 6 은 오로지 background-image 에서만 먹죠. (궁시렁궁시렁)
이를 표현할 수 있는 꼼수도 있지만, 일단 pass.
#zero {
position: fixed;
top: 20px;
left: 20px;
}
#three {
position: fixed;
top: 40px;
left: 40px;
}
왼쪽 렌더링을 보면 absolute 예제와 똑같습니다. ( absolute와 fixed만 바꿨습니다-_-; )
다른점은 스크롤을 옮겨도 0번과 3번은 그자리 그대로 있다는 것이지요!
말그대로 "고정위치"입니다.
absolute와 fixed의 차이점은 다음과 같습니다.
absolute는 부모 창의 offset을 더하여 위치하지만
fixed는html 전체 문서브라우저 창의 Viewport를 기준으로 위치하네요.
출처 : http://mkyoon.com/56'Front-End > jQuery' 카테고리의 다른 글
Jquery js file Error 대처법 (0) 2013.07.16 Div Loading 이미지 영역 Dimm (0) 2013.07.04 날짜값 + - 현재 날짜 가져오기 (0) 2013.07.04 JSON object 복사 / clone (0) 2013.05.24 Jquery select Add or Remove (0) 2012.11.14 Jquery Selector 예시 (0) 2012.11.08 제이쿼리 체크박스 (0) 2012.11.06 날짜 시간값 계산 (0) 2012.07.24 Jquery 아코디언 형식 (0) 2012.06.27 jQuery 입력 폼 플러그인 (1) 2012.06.20 댓글