[ html/css]Position 속성 태그

Position 속성 태그 복습

position: 레이아웃을 배치해준다, 객체를 위치시킬 때 사용하는 속성

position: static;

           -초기값을 주지 않을때 와 같습니다.

position:relative;

          -원래의 위치부터 계산해 줍니다.

position: absolute;
         -문서의 원래의 위치와 상관없이 위치 지정이 가능하다 (원하는 곳에 요소를 위치 시킬 수 있다)  
         -가장 가까운 상위요소를 기준으로 위치를 잡는다

          -상위 요소가 없으면 html기준으로 위치를 잡는다

position:fixed; 

 

        -화면이 바뀌더라도 고정된 위치를 설정할 수 있다

        -Top(위)bottom(아래)left(왼)right(오) 위치를 설정할 수 있다

 

position 속성

요소를 원하는 위치에 이동 시키는것.

기본 값 : static

position: static | absolute | fixed | relative | sticky | initial | inherit;

< 속성 값 >

static	Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값)
absolute	부모 요소의 위치를 기준으로 offset 에 따라 배치된다. 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다. * 부모의 position 값이 static 인 경우 조상의 position 값이 static이     아닐 때까지 거슬러 올라가 기준으로 삼습니다. Normal-flow의 흐름에서 벗어난다.
fixed	뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다. 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다. 부모의 위치에 영향을 받지 않는다.
relative	자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다. 부모의 position 속성에 영향을 받지 않는다. Normal -flow의 흐름에 따른다. 주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다

 

• Normal-flow  란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻합니다. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말합니다.

z-index 속성

기본 값 : auto

요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다.

z-index: auto | number | initial | inherit;

< 속성 값 >

auto	쌓임 순서를 부모와 동일하게 설정(기본값)
number	해당 수치로 쌓임 순서를 설정(음수 허용)

z-index: 1;​

• position 값이 static이 아닌 경우 지정가능
• 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
• 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
• 큰 값이 가장 위쪽(음수 사용 가능)