[CSS] 7. 앨리먼트를 겹쳐보쟈. (position) 강의이야기 | Posted on 2012. 2. 5. 00:42
해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.
이번에는 position:absolute;를 배워보겠습니다.
이것은 해당 앨리먼트를 띄우는 역활을 합니다.
주로 jQuery와 합쳐질때 사용하는 명령어로..
대표적인 사용예에는 사용자의 화면에 따라 이동하는 퀵메뉴같은곳에 주로 쓰입니다.
게다가 이 옵션을 주면, 기존에는 사용할 수 없었던 top, left, right, bottom이 사용 가능합니다.
단, 주의 하실점은 기존 margin이나 padding의 계산법과는 틀리다는 겁니다.
마진이나 페딩은 부모 앨리먼트안에서 이동하지만, 앱솔루트를 주고나서 top등을 사용하면, 화면의 좌상에서부터 좌표를 계산한다는 겁니다.
이것을 방지하기 위해서는 부모 앨리먼트에 position:relative; 옵션을 지정하는 방법이 있습니다.
<div style="position:absolute;">a</div>
<div style="position:relative;">b</div>
a와 b가 곂쳐있는것을 볼 수 있습니다.
ps. 여담이지만, 필자는 앱솔루트 주는것을 싫어합니다.
그 이유인 즉, IE6에서는 엄청나게 터진다는 것이지요.
한번은 아예 새롭게 만들어야 할 레벨로 터진적이 있어서..
앱솔루트는 꼭 필요한곳이 아니면 안주고 있습니다.
단순히 필자의 잘못일지도 모르지만, 개인적으로 앱솔루트는 꼭 필요한곳이 아니면 사용하지 않을것을 추천합니다.
출처 : Pure Ani's Blog
이번에는 position:absolute;를 배워보겠습니다.
이것은 해당 앨리먼트를 띄우는 역활을 합니다.
주로 jQuery와 합쳐질때 사용하는 명령어로..
대표적인 사용예에는 사용자의 화면에 따라 이동하는 퀵메뉴같은곳에 주로 쓰입니다.
게다가 이 옵션을 주면, 기존에는 사용할 수 없었던 top, left, right, bottom이 사용 가능합니다.
단, 주의 하실점은 기존 margin이나 padding의 계산법과는 틀리다는 겁니다.
마진이나 페딩은 부모 앨리먼트안에서 이동하지만, 앱솔루트를 주고나서 top등을 사용하면, 화면의 좌상에서부터 좌표를 계산한다는 겁니다.
이것을 방지하기 위해서는 부모 앨리먼트에 position:relative; 옵션을 지정하는 방법이 있습니다.
<div style="position:absolute;">a</div>
<div style="position:relative;">b</div>
ps. 여담이지만, 필자는 앱솔루트 주는것을 싫어합니다.
그 이유인 즉, IE6에서는 엄청나게 터진다는 것이지요.
한번은 아예 새롭게 만들어야 할 레벨로 터진적이 있어서..
앱솔루트는 꼭 필요한곳이 아니면 안주고 있습니다.
단순히 필자의 잘못일지도 모르지만, 개인적으로 앱솔루트는 꼭 필요한곳이 아니면 사용하지 않을것을 추천합니다.
출처 : Pure Ani's Blog
