CSS 레이아웃 - Position 사용하기

안녕하세요.

오늘은 웹페이지를 만들때, 기본이 되는 레이아웃을 잡을때 사용하는 css의 position에 대해서 알아보겠습니다.

엘리먼트의 위치(position)를 지정하는 방법

• static (default값)

• relative (상대적 위치)

• absolute (절대적 위치)

• fixed (고정적 위치)

static

• position을 설정하지 않았을때, 기본적으로 적용되는 값 입니다. (고정값)

relative

• 특정 엘리먼트가 현재 속한 위치에서 left, right 등의 값에 따라 상대적인 위치를 변경할때 사용합니다.
• 부모 엘리먼트를 기준으로 상대적으로 움직입니다.
• 예제 : http://codepen.io/leedu/pen/kkbvYO

absolute

• position값이 relative인 부모를 기준으로 움직입니다. 만약, 없다면 웹페이지의 가장자리 왼쪽 상단을 기본 위치로 잡습니다.
• 특정 엘리먼트에 적용이 되면, 해당 엘리먼트는 부모 container에서 배제됩니다. (아래 예제 참조)
• 부모가 없어지기 때문에 content의 크기에 맞게 사이즈가 변경됩니다,(wrap-content)
• 부모 엘리먼트도 자식과 연결이 끊어지기 때문에 사이즈가 작아집니다.
• 부모 중 static이 아닌, 부모를 만나면 그 부모를 기준으로 left, right 등에 따라 offset 위치가 결정됩니다.
  
• 예제 : http://codepen.io/leedu/pen/WGwdjm

fixed

• 특정한 엘리먼트를 화면의 특정 위치에 고정시켜서 scroll로 부터 독립된 엘리먼트를 만들 수 있습니다.
• 외에는 absolute와 같은 특징을 가지고 있습니다. (부모 엘리먼트와 연결이 끊어짐)
• 예제 : http://codepen.io/leedu/pen/ALKxrW

참조

• https://opentutorials.org/course/2418/13414 , 생활코딩