티스토리 뷰

Web/javascript & jQuery

[CSS] Position

구글링쟁이 k9e4h 2016.05.03 17:59



CSS에서 Position 위치를 지정할 수 있는 4가지 방법




기본적으로 왼쪽에서 오른쪽 / 위에서 아래의 순서로 배치됨




1. float : left,right

float은 위로 띄우는것 그럼 그 다음에 있던 것들이 치고 올라오겠지

자기가 출력될 자리에서 공중에 뜨는 것



div 경우 float를 사용할때

width,height를 지정하지 않으면 content의 내용에 따라 크기가 나타나게됨




2. position:absolute 

조상(부모x)을 기준으로 상대적인 위치를 지정함

조상 : absolute or relative

조상중에 absolute or relative가 없으면 body를 기준




3. position:fixed

웹 브라우저 client영역

스크롤 상관없이 고정 위치




4. position:relative

1,2,3은 출력순서를 벗어난다

얘는 현재 위치 고정, 밑에 애들이 치고 올라오지 못한다.








absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다.

absolute가 되면 div여도 width:100%가 되지 않음






'Web > javascript & jQuery' 카테고리의 다른 글

[CSS] z-index  (0) 2016.05.18
[CSS] div 겹치는 문제  (0) 2016.05.10
[CSS] Position  (0) 2016.05.03
[WEB] Apache와 Tomcat의 차이  (0) 2016.05.02
JavaScript 찔끔  (0) 2016.04.21
jQuery 찔끔  (0) 2016.04.12
댓글
댓글쓰기 폼