position
css에서
position속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다.
많은 경우position속성은 요소의 정확한 위치 지정을 위해서top,left,bottom,right속성과 함께 사용된다.
position: relative
일반적인 문서 흐름에 따라 요소를 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다 그래서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.
코드를 작성해보자면 ▼
#two{
width: 150px;
border: 1px solid blue;
position: relative;
top:10px;
left:10px;
}► 결과
position: absolute
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 가장 가까운 위치 지정 부모 요소에 대해 상대적으로 배치한다. 단 부모 중 위치 지정 요소가 없다면 초기 컨테이닝블록을 기준으로 삼는다. 최종위치는 top, right, bottom, left 값이 지정한다.
코드를 작성해보자면 ▼
#two{
width: 150px;
border: 1px solid blue;
position: absolute;
}►결과
코드를 잠시 설명해보자면, absolute 속성을 주는 순간 이 태그요소는 다른 태그요소들과 다른 층으로 옮겨 갔다고 이해하면 된다. 즉, 3차원 좌표계라면 z축이 변경되었고 이로 인해 남은 빈 공간에 three가 채워져 들어간거다 이때 (x,y)의 위치는 변하지 않은 것에 주의해야 한다.
여기서 한가지 짚고 넘어갈 점은 현재 two태그 요소는 부모태그가 없다. 이런 경우는 브라우저의 좌 상단의 좌표가 0,0이 된다. 하지만 부모 태그가 있는 경우는 조건에 따라서 달라진다
부모요소에 relative 값이 있다면 해당 부모의 위치가 0,0이 된다.
즉, 부모가 있을때, 그리고 부모가 static이 아닐때 외에는 브라우저의 좌상단이 0,0이 되므로 레이아웃사용 할때 주의해서 원하는 값으로 사용하면 된다.
✍🏻 예를 들어 코드를 보면서 좀 더 쉽게 접근해보자
부모요소에 relative 값을 넣어준다면 ▼
<style>
#one{
width: 150px;
border: 1px solid red;
position: relative; /* 부모요소 */
}
#two{
width: 150px;
border: 1px solid blue;
position: absolute; /* 자식요소 */
top: 0;
left: 0;
}
#three{
width: 150px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="one">one
<div id="two">two</div></div>
<div id="three">three</div>
</body>►결과
부모요소가 0,0 이 되므로 ! 겹치게 된다 여기서 위치를 변하게 된다면 부모요소 안에서 변하게 된다.
position: fixed
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 뷰포트 기준으로 삼아 배치한다.
화면을 위아래로 스크롤하더라도 화면 특정부분이 움직이지 않고 고정된 UI를 본적이 있을 것이다.position: fixed로 지정하면 항상 고정된 위치에 배치할 수 있다.
