HTML CSS

CSS Position 속성

차차한 2022. 7. 27. 10:19

position 속성은 요소의 위치 기준이 된다.

position 속성으로 기준점을 잡고 top, buttom, left, right 로 위치를 이동시킨다.

 

position속성은 5가지가 있다.

static 기본값
relative 요소 자기 자신을 기준으로 함
absolute 부모를 기준으로 함
sticky 스크롤 영역을 기준으로 함
fixed 뷰포트를 기준으로 함

 

Relative

기준을 자기 자신의 원래 위치(=static일 때 위치)로 두고 배치할 수 있다.

원래 위치에서 top bottom left right만큼 이동시킬 수 있다.

문서 상 원래 위치가 그대로 유지된다.

위치를 이동할 때 다른 요소에 영향을 주지 않는다.

<style>

div{
	height : 100px;
    width : 100px;
    border : 1px solid black;
}

.relative{
	border : 1px solid red;
    position : relative;
    top : 10px;
    left : 10px;
	
}
</style>
<body>

<div class="div">
position = static
</div>

<div class="div relative">
position = relative
</div>

<div class="div">
position = static
</div>

</body>

두 번째 상자에 position : relative를 주고 top, left로 10px씩 주게되면 위와 같은 결과가 나타난다.

원래 위치를 기준(relative)으로 위와 왼쪽으로부터 10px씩 이동했다.

위치가 이동하였지만 원래 두 번째 div상자 자리로 세 번째 상자가 침범하지 않고, 

두 번째 상자는 세 번째 상자와 위치가 겹치지만 아무 영향을 주지 않는다.

 

Absolute

요소를 이동할 때 부모 요소의 위치를 기준으로 잡고 이동한다.

부모 요소 중 position 속성을 가진 요소가 없으면 body를 기준으로 이동한다.

문서 상 원래 위치를 잃게 된다.

<style>

.div{
	height : 100px;
    width : 100px;
    border : 1px solid black;
}

.parent{
	border : 1px dashed black;
    position : relative;
}

.absolute{
	position : absolute;
    top : 10px;
    left : 10px;
}
</style>
<body>

<div class="parent">

  <div class="div">
  position = static
  </div>

  <div class="div absolute">
  position = absolute
  </div>

  <div class="div">
  position = static
  </div>

</div>

</body>

두 번째 상자에 position : absolute를 주고 top, left로 10px씩 주게되면 위와 같은 결과가 나타난다.

부모 요소인 .parent에 position 속성이 정해져 있어 부모 요소를 기준점으로 잡고 위와 왼쪽으로부터 10px씩 이동했다.

position : absolute를 주게 되면 원래 위치를 잃게 되어 세 번째 상자가 첫 번째 div 상자 아래로 이동하게 된다.

 

Sticky

스크롤을 기준으로 삼는 position 속성이다

스크롤을 내렸을 때 sticky 속성을 지정해둔 div는 이동되지 않고 그 자리에 고정된다.

엑셀에서 행 고정이라고 생각하자

 

Fixed

뷰 포트를 기준으로 삼는 position 속성이다

스크롤을 내릴 때 해당 위치에 계속 고정되어 있다.

웹페이지에서 사이드 배너라고 생각하자