CSS - position (블럭 위치조절 3가지 방법)

CSS 블럭 위치 조절 3가지 방법

• display : inline-block
• 속성 float
• 속성 position
  **포지션을 쓰면 z-index를 다 써주는 것이 좋다.   
  
  

 

display : inline-block

속성 display 의 속성 값으론 inline , inline-block, block 이 있다. inline 형태의 특징으로 margin 과 width 의 속성을 이용할 수 없다.

그래서 위치 변경의 어려움이 있는데 그것을 display : inline-block ;  사용하여 inlin-block 형태를 취하게 되면 inline의 특징을 가지면서 block 형태를 가지기 때문에 width, height, padding, margin을 모두 사용할 수 있게 되므로 위치 조절을 하는데 용이하다.

 

float

쉬운 이해를 위해 사진과 같은 역할을 한다고 생각하면 될 것 같다. 

속성 float :속성값은 left, right ...가 있음

1. 강제로 이동시킴

2. inline-block 속성이 적용

3. 단점: 하위 엘리먼트를 강제로 끌어올림(최근 현업에선 잘 쓰지 않음)

 

position

position : 겹치게 표현할 수 있는 속성

top left right bottom z-index 으로 위치를 조절할 수 있다.

 

속성 position의 속성 값은 relative, absolute, fixed ...등이 있다.

 

relative : 상대적인 위치 - 최초 설정한 자기 위치에서 지정한 값만큼 이동하는 것

absolute : 절대적인 위치 - 브라우저 기준으로 지정한 값 만큼 이동

 

기본적으로 relative는 기존에 지정했던 블럭들이 움직이지 않고 absolute 는 지정하는 블럭 뒤에 오는 블럭들이 앞으로 당겨진다.

position을 사용한 후 top, left, right, bottom 로 위치를 지정할 수 있으며 겹치는 구간에선 z-index 를 이용하여 쌓을 수 있다.

z-index : number; 로 사용하고, 숫자가 높을수록 앞으로 보인다. 숫자가 낮을수록 뒤로 들어간다.

 

실제로 사용할 때는

relative 와 absolute를 같이 쓴다. 왜냐하면 absolute 는 부모 position 값이 있다면 그 부모 블럭을 기준으로 position 값을 이동시킬 수 있기 때문이다.

 

 

정리하자면 

 

position: absolute; 절대적인

부모 엘리먼트가 포지션 속성이 없다면 브라우저 좌상단 기준으로 겹쳐진다.

부모가 relative 를 가지고 있으면 브라우저 기준이 아닌 부모의 포지션으로 간다.

position을 사용하는 블럭이 이동을 하면서 그 뒤에 있던 블럭이 앞으로 당겨진다.

 

 

position: relative; 상대적인

속해 있는 블럭 좌상단 기준으로 겹쳐진다.

2가지를 쓴다면 겹치지는 못하고 첫 번째 쓰인 포지션의 블럭의 밑으로 붙는다.

absolute 를 쓰기 전에 기준 정도로만 생각하면 좋다.

큰 틀의 블럭은 이동하지 않고 적용 블럭이 겹쳐진다.