1976s

이 블로그는 웹 개발, 프로그래밍, IT 활용법을 다루며, 실용적인 팁과 정보를 제공합니다.

# Side Menu

recentPost
popularPost
Archive
recentComment

공부/CSS

CSS - Position

2023. 3. 6., 1976s

CSS Position

position 속성은 Html 문서 상에서 요소가 배치되는 방식을 결정한다. 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다. position의 property에는 static, relative, absolute, fixed, sticky 다섯 종류가 있다.

position: static은 요소를 문서 흐름에 따라 배치하는 기본값입니다. top, bottom, left, right, z-index와 같은 위치 지정 속성은 적용되지 않습니다.
position: relative는 요소의 위치를 상대적으로 이동시키는 데 사용됩니다. 이 경우 top, bottom, left, right 속성을 사용하여 요소를 원하는 위치로 이동시킬 수 있습니다.
position: absolute는 요소를 문서의 상위 요소 중 가장 가까운 요소에 대해 상대적인 위치를 이동시킵니다. top, bottom, left, right 속성을 사용하여 요소를 이동시킬 수 있으며, 부모 요소가 없으면 문서 전체를 기준으로 위치가 결정됩니다.
position: fixed는 요소를 브라우저 창에 상대적으로 고정시킵니다. 스크롤이 움직여도 요소의 위치는 변하지 않습니다.
position: sticky는 요소를 스크롤 영역의 가장자리에 고정시킵니다. 스크롤이 영역을 벗어나면 요소는 상대적인 위치에 따라 이동됩니다.

위치 지정 속성을 사용하여 요소를 이동시키는 방법은 매우 강력하지만, 올바르게 사용하지 않으면 레이아웃이 깨지거나 사용자 경험을 해치는 웹 페이지를 만들 수 있습니다. 따라서 position 속성을 사용할 때는 신중하게 사용해야 합니다.

CSS position property

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

position : static (기본값)

position의 기본설정값이라고 보면 됩니다. 요소를 문서 흐름에 따라 배치합니다.
다른 Position 값들과 달리, 위치를 지정할 수 없습니다.

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box{
  border: 2px solid #33cc33;
  height:100px;
  width:100px;
  background-color: #99ff99;  
}

박스가 정상적으로 배치되어 있는 것을 알 수 있으며, 그 위치에는 값을 할당하지 않았습니다. 이유는 static이 기본값이며 원래 이 값에 따라 배치된 요소입니다. (원래는 다른 상자 아래에 하나씩 배치되지만, 이 새 개의 div 요소는 디스플레이 속성 flex(플렉스)로 설정 되었습니다. 이 포스터에는 기본으로 이 값을 기본으로 만들었습니다.)

position : relative

요소를 문서 흐름에 따라 배치합니다.
요소가 static으로 배치된 것처럼 보이지만, top, bottom, left, right 속성을 사용하여 위치를 원래위치에서 상대적으로 조정할 수 있습니다.

<main>
<div class="box" id="r1">box1</div>
<div class="box" id="r2">box2</div>
<div class="box" id="r3">box3</div>
</main>

.box{
  border: 2px solid #33cc33;
  height:100px;
  width:100px;
  background-color: #99ff99;  
}
#r2 {
  position:relative;
  /* 보시다시피 위치 설정 속성 위, 아래, 왼쪽 또는 오른쪽은 없습니다. */
  border: 2px solid #9933ff;
  background-color: #cc99ff;
}

ID: r2를 다로 설정하여 배치하였습니다. 그리고 이것이 그 결과입니다. 여기서 두 번째 div 요소는 position속성을 relative하고 top, bottom, left, right(위, 아래, 왼쪽, 오른쪽) 부여하지 않았기 때문에 상대적인 위치로 설정됩니다.

이제 top:20px;와 left:20px;를 움직여 보겠습니다. 원래 위치에서 설정한 만큼 이동한 것을 보실 수 있습니다.

#r2 {
  position:relative;
  left: 20px;
  top: 20px;
  border: 2px solid #9933ff;
  background-color: #cc99ff;
}

position : absolute

요소를 문서 흐름에서 벗어나 위치를 지정할 수 있습니다.
가장 가까운 위치 지정된 조상 요소를 기준으로 배치됩니다.
부모 요소가 Position 값 중 static이 아닌 값이어야만, 자식 요소를 absolute로 배치할 수 있습니다.

position: absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. DOM 트리를 따라 올라가다가 position: static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데요. 만약에 해당 요소 상위에 position: static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 됩니다.

main {
  ...
  position: relative;
  ...
}
    #r2 {
      position:absolute;
      top: 60px;
      left: 60px;
      border: 2px solid #9933ff;
      background-color: #cc99ff;
      opacity:.7;
    }

또한, position: absolute 속성값이 지정된 요소 뒤에 일반 요소(box3)가 추가된다면, position: absolute 속성값이 지정된 요소는 문서에 흐름에서 제거되기 때문에 원래의 자리에 추가된 요소가 위치하게 됩니다.

position : fixed

요소를 뷰포트 기준으로 배치합니다.
스크롤을 내려도 항상 같은 위치에 고정됩니다.

#r2 {
  position:fixed;
  bottom: 60px;
  right: 60px;
  border: 2px solid #9933ff;
  background-color: #cc99ff;
}

position :sticky

요소를 문서 흐름에 따라 배치합니다.
특정 위치에 도달하면 고정됩니다.
top, bottom, left, right 속성 중 하나와 함께 사용됩니다.

.div1 {
  ...
  height:400px;
}
.div2 {
  background-color: #fdda00;
  height:500px;
  ...
}
.box{
  ...
}
#r2 {
  position: sticky;
  top: 20px;
  ...
}

상위 요소가 스크롤 될 때 position: sticky;속성값이 적용된 요소에만 오프셋 대로 고정되게 되고, 일반적으로는 문서의 흐름대로 움직입니다.

마무리

이렇게 CSS의 Position 속성은 요소를 원하는 위치에 배치하는 데에 큰 도움이 됩니다.