-
Absolute, Relative, Fixed 위치: 어떻게 그들은 다른가?카테고리 없음 2012. 1. 2. 13:43
작성 : 크리스 코이어
"저는 웹디자인에 꽤 오랫동안 일해 왔지만 엘리먼트의 위치의 차이에 대해 마스터 해본적 없습니다. 저는 absolute, fixed, relative가 있다는 것을 알고 있습니다 다른 것이 있나요? 또한 그들의 큰 차이는 무엇인가요? 그리고 우리는ㅇ 어떤 것을 언제 사용하여야 하나요?
짧은 답변 : 네, 거기엔 디폴트인 "static"이라는 것이 한가지가 더 있습니다. 예, 그들은 크게 다릅니다. 그들의 각각은 믿을 수 없을 만큼 유용하고 당신이 사용하여할 것은 원하는 결과에 달려 있습니다. 또한, positioning에서 중요한 부분인 float에 대해 잊지 마세요.
중간 답변 : 저는 긴 답변을 하지 않을 것입니다. 왜냐면 전에 여러번 쓰여졌던 것을 다시금 쓸 이유가 없기 때문입니다. 그러나 저는 각 타입으로 통해 빨리 우리가 쉽득할 수 있는 "중간 답변"을 여기 할 것입니다. 저는 또한 때때로 이것을 설명하는데 꽤 좋은 10단계 튜토리얼를 언급할 것입니다.
이해하기 위해 가장 중요한 개녑은 웹페지의 모든 single 엘리먼트는 block이라는 것입니다. 글자 그대로 픽셀은 사각형이다. 이것은 우리가 엘리먼트의 display를 block으로 설정했을 때 가장 쉽게 이해하는 방법이다. 또는 디폴트에 의해 엘리먼트의 display가 block으로 되었을 때, 이해하기 쉬운 방법이다. 이것은 우리가 width와 height를 결정할 수 있음을 의미하고 그 엘리먼트는 그것을 따른다. 그러나 span처럼 디폴트가 display가 inline인 사각형의 엘리먼트는 단지 그들이 할수 있는 한 수평으로 줄을 지어 페이지에 흐른다.
지금 우리는 픽셀의 block 요소인 각 싱글 페이지 엘리먼트를 그려 보았을 때, 우리는 어떻게 당신이 원하는 정확한 위치에 픽셀의 block 얻기 위해 어떻게 위치를 잡아야 하는지에 대해 이야기 할 수 있다. 우리는 box medel의 어떤 논의를 떠날거지만 그 요소는 유효하다.
Static. 이것은 모든 싱글 페이지 엘이먼트의 기본 요소이다. 다른 엘리먼트는 모두 static으로 부터 출발했기 때문에 positioning의 디폴트 값으로 다른 값을 가질 수 없다. Static은 많은 것을 의미하지 않지만 그것은 엘리멑트가 각 페이지에 일반적으인 흐르는 것을 의미한다.당신이 엘리먼트의 position을 Static으로 강제적으로 정해야 하는 이유는 유일하다. 당신의 컨트롤로부터 벗어난 엘리먼트에 적용된 어떤 positioning을 제하기 위해서 이다. 이것은 positioning이 cascade되지 않은 꽤 드문 경우이다.
Relative. 이것은 잘못 이해되고 대두분은 혼돈하기 쉬운 positioning 타입이다. 그것의 진짜 의미하는 것은 "자신에게 상대적"이란 의미이다. 만약 당신이 "position: relative"라고 설정했다면, (top, left, bottom, right)왁 같은 위치 attribute를 제외하고 엘리먼트 상에 , 그것의 positioning에 어떤한 효과도 없을 것이다. 그것은 당신이 그것의 포지션으로 static으로 남겨 두었을 때 정확히 나타내어 질 것이다. 그러나 당신이 positioning 요소로써 top:10px;로 주었을 때, 그것은 그것의 위치를 일반적인 그것의 위치로부터 10픽셀 아래로 위치하게 옮길 것입니다. 저는 당신이 상상할 수 있다고 확신하고 그것의 일반적인 위치를 기본으로 주위에 옮길 수 있다는 능력이 아주 유용하다고 확신합니다. 저는 여러 차례 제가 원하는 대로 라인업 하지 않는 경향이 있는 form 엘리먼트 요소를 줄지어 세우기 위해 이것을 사용하는 저를 발견했습니다.
position: relative를 설정했을 때, 당신이 인식해야 하는 엘리먼트상의 두가지 다른 요소가 있습니다. 첫번째 것은 static 위치 요소에서는 동작하지 않는 그것의 엘리먼트 상의 z-index사용하는 능력을 소개하는 것입니다. 심지어 당신이 z-index를 설정하지 않더라도, 이 엘리먼트는 다른 어떤 static 위치 엘리먼트 요소 위에 나타날 것입니다. 당신은 static 위치 엘리먼트 상에 더 높은 z-index 설정하더라도 그것과 다툴 수 없다. 일어나는 다른 것들은 그것이 absolute로 위치 되어진 자식 엘리멘트들의 범위를 제한한다는 것이다. relative로 위치 되어진 엘리먼트의 자식 엘리먼트는 absolute 위치 되어진 엘리먼트 안에 블럭 되어 집니다. 이것은 제가 여기서 언급한 다른 강력한 많은 기회를 가져온다.
Absolute. 이것은 당신이 어떤 페이지의 엘리먼트도 당신이 원하는 위치에 놓을 수 있는 매우 강력한 positioning 타입이다. 당신은 positioning 요소로써 위치를 지정할 수 있는 top, left, bottom, right을 사용합니다. 이러한 값들은 relative 또는 absolute인 다음 부모 엘리먼트와 상대적인라는 것을 기억하세요. 만약 그런한 부모 엘리먼트가 없다면, 그것은 <html> 엘리먼트 스솔 그것은 relative하게 페이지에 존재함을 의미하는 디폴트 값이 될것이다.
absolute 위치에 대한 기억하여할 중요한 trade-off는 그러한 엘리먼트가 페이지에서 엘리먼트의 흐름에서 제거된다는 것이다. 위치 타입을 이 타입으로 쓰인 엘리먼트는 다른 엘리먼트에 의해 영향받지 않고 다른 엘리먼트에 영향을 끼치지 않는다. 이것은 당신이 absolute 포지셔닝을 사용함에 있어 매번 고려하여 할 중용한 것입니다. 그것을 과용하거나 적절하게 사용하면 여러분의 싸이트의 자유도를 제한 할수 있습니다.
Fixed. 이 포지셔닝 타입은 꽤 드물지만 고유의 사용처가 있습니다. fixed 포지셔닝 엘리먼트는 viewport에 상대적으로 위치되거나 브로우저 원도우즈 그 자체위에 위치한다. 원도우가 스크롤 되었을 때, viewport는 변하지 않는다. 그래서 fixed 포지셔닝 엘리먼트는 페이지가 스크롤된 그것의 본래 위치에 위치하게 된다. 오랜 학교 " frames" 날처럼 양간의 효과를 나타냅니다. 원 쪽 사이드바가 고정된 이 싸이트를 보세요. 이 싸이튼 그것의 fixed 포지셔닝의 좋은 점과 나쁜 점을 모두 보여주기 때문에 완벽한 예제입니다. 좋은 점은 네비게이션을 페이지에서 항상 있다는 점이고 페이지 위에 흥미로운 효과를 만들수 있다는 것이다. 나쁜 점은 사용성에 대한 염려가 있다는 것입니다. 저의 작은 랩탑에서, 사이드 바의 내용은 짤려 나오고 내용의 나머지 부분을 보기 위해 스크롤을 다운할 방법이 없다는 것입니다. 또한 만약 제가 푸터로 스크롤을 했을 때, 그것은 푸터의 내용을 저에개 보도록 허용하지 않고 덮어 버립니다. 좋은 효과 유용하지만 충분한 테스트가 필요합니다.
*http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
번역하였습니다. 오역이나 오타는 신고 부탁 드립니다.
댓글
