가치투자자

[CSS] position 본문

Programming/HTML, CSS

[CSS] position

미주민 2023. 6. 4. 15:01
728x90
반응형

 position 속성 

 1. position이란? 

 position 은 레이아웃에서 요소를 어떻게 위치시킬지 결정해주는 프로퍼티(속성)다. 좌표 프로퍼티(top, bottom, left, right)와 함께 사용하여 위치를 정해줄 수 있다.

position 속성을 사용하기 위한 문법은 다음과 같다.

position: 속성값;

 

이제 position 속성에서 사용할 수 있는 속성값에 대해 살펴보자.

 

반응형

 2-1. static (기본 위치) 

 static 은 position의 기본 속성값으로, position 속성을 사용하지 않았을 때와 같다.

html 코드의 순서대로 위에서 아래로, 왼쪽에서 오른쪽 순으로 배치가 된다.

 

이 속성값은 이미 설정된 position을 무력화히기 위해 사용될 수 있다.

좌표 프로퍼티(top, bottom, left, right) 및 z-index와 같이 사용할 수는 없으며, 사용할 경우에는 무시된다.

 

예시>

아래 예시를 보면, 부모 요소(origin) 내에 위에서 아래로 자식 요소가 위치한 것을 볼 수 있다.

<div class="origin">
  <div class="static-position">static</div>
</div>
.origin {
    width: 150px;
    height: 150px;
    background: #FFEEC2;
}
.static-position {
    position: static;
    line-height: 50px;
    background: #FFC56F;
    color: white;
    text-align: center;
}

 

출력 결과>

static

 

 

 2-2. relative (상대적 위치) 

 relative 는 원래 위치를 기준으로 좌표 프로퍼티를 사용하여 상대적 위치를 지정할 때 사용된다.

static 속성과 relative 속성의 차이점은 좌표 프로퍼티 작동 여부이며, 그 외에는 동일하다.

 

예시>

아래 예시를 살펴보면, 부모 요소(origin)의 너비와 자식 요소의 너비가 동일하다. 이는 부모의 width가 자식 요소에 상속된 것이 아니라 자식 요소의 width가 100%를 차지해 부모의 width와 동일한 것이다. 즉, relative가 적용된 요소는 위치만 다를 뿐 그 외에는 static일 때와 일하다.

<div class="origin">
  <div class="relative-position">relative</div>
</div>
.origin {
    width: 150px;
    height: 150px;
    background: #FFEEC2;
}
.relative-position {
    position: relative;
    top: 30px;
    left: 30px;
    line-height: 50px;
    background: #FFC56F;
    color: white;
    text-align: center;
}

 

출력 결과>

relative

 

 

 2-3. absolute (절대적 위치) 

 absolute 는 부모 또는 가장 가까운 조상 요소(static 제외)를 기준으로 좌표 프로퍼티를 적용할 때 사용한다. 즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 상위 요소를 기준으로 위치가 결정된다.

 

만약 상위 요소가 static인 경우,  document body를 기준으로 좌표 프로퍼티가 적용된다.

또한, absolute 선언시 block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 결정된다.

 

1) relative 프로퍼티 vs absolute 프로퍼티

relative 프로퍼티는 기본 위치(static)를 기준으로 좌표 프로퍼티가 적용된다. 따라서 무조건 부모를 기준으로 위치가 정해진다.

absolute 프로퍼티는 static 이외의 position 프로퍼티인 경우에만 부모를 기준으로 위치가 정해진다. 만약 부모, 조상 요소 모두 static인 경우, document body를 기준으로 위치하게 된다. 

 

따라서 absolute 프로퍼티 요소는 부모 영역을 벗어나 어디든 위치할 수 있다.

 

예시>

아래의 예시를 보면, 부모 요소가 static이여서 document body를 기준으로 좌표 프로퍼티가 적용된다.

그래서 부모 요소와는 상관없이 위와 왼쪽으로부터 50px 떨어졌고, content의 크기만큼 width가 정해졌다.

<div class="origin">
  <div class="absolute-position">absolute box</div>
</div>
.origin {
    position: relative;
    width: 150px;
    height: 150px;
    background: #FFEEC2;
}
.absolute-position {
    position: absolute;
    top: 50px;
    left: 50px;
    line-height: 50px;
    background: #FFC56F;
    color: white;
    text-align: center;
}

 

출력 결과>

absolute box

 

 

 2-4. fixed (고정된 위치) 

 fixed 는 부모 요소와 상관없이 브라우저의 viewport(좌측상단)을 기준으로 위치를 고정시켜주는 속성값이다.

fixed가 된 요소는 스크롤이 되더라도 항상 같은 위치에 고정된다. 또한, fixed 선언시 block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 결정된다.

 

예시>

오른쪽 아래에 버튼이 고정된 것처럼 특정 위치에 요소를 고정시키고 싶을 때 유용하다.

(바깥의 박스를 브라우저창이라고 가정)

<body>
  <div class="fixed-position">click</div>
</body>
.fixed-position {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 50px;
    line-height: 50px;
    background: #FFC56F;
    color: white;
    text-align: center;
}

 

출력 결과>

click

 

 

 2-5. sticky 

 sticky 는 평소에는 relative 속성을 띄지만, sticky가 적용된 요소가 스크롤에서 사라질 임계점에 이르면 fixed와 같이 화면에 고정되는 속성값이다. sticky는 스크롤이 되는 조상을 기준으로 좌표 프로퍼티의 값에 따라 위치가 정해진다. 따라서 좌표 프로퍼티 중 하나는 반드시 설정되어 있어야 한다.

 

예시>

top과의 거리가 0이기에 스크롤을 아무리 밑으로 내리더라도 sticky가 적용된 요소는 항상 맨 상단 top이 0인 위치에 고정된다.

.sticky-position {
    position: sticky;
    top: 0px;
    background: #FFC56F;
    color: white;
    text-align: center;
}

 

728x90

 

 3. 요약 정리 

1.  static 

 

  • position의 기본 속성값으로, position 속성을 사용하지 않았을 때와 같다
  • 좌표 프로퍼티 및 z-index가 적용되지 않는다

2.  relative 

 

  • 원래 위치를 기준으로 상대적 위치를 지정할 때 사용하는 속성값

  • 좌표 프로퍼티를 적용할 수 있다는 점 외에는 static과 동일하다

3.  absolute 

 

  • static이 아닌 가장 가까운 상위 요소를 기준으로 절대적 위치를 지정할 때 사용하는 속성값

  • 만약 상위 요소가 static인 경우,  document body를 기준으로 좌표 프로퍼티가 적용

4.  fixed 

 

  • 부모 요소와 상관없이 특정 위치에 고정시켜주는 속성값

  • 스크롤이 되더라도 항상 같은 위치에 고정된다

5.  sticky 

 

  • 평소에는 relative 속성을 띄지만, sticky가 적용된 요소가 스크롤에서 사라질 임계점에 이르면 fixed와 같이 화면에 고정되는 속성값

  • 스크롤이 되는 조상을 기준으로 위치가 결정되므로 좌표 프로퍼티 중 반드시 하나는 설정되어야 한다

 

 

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

 

References

 

 

728x90
반응형

'Programming > HTML, CSS' 카테고리의 다른 글

[HTML] 시멘틱 태그(semantic tag)란?  (2) 2023.06.17
[CSS] display  (0) 2023.06.03
[CSS] 선택자 : 가상 클래스 & 가상 요소  (0) 2023.04.21
[CSS] 선택자  (1) 2023.04.19
[CSS] Flexbox 레이아웃  (0) 2023.04.17
'Programming/HTML, CSS' Related Articles more