CSS position | relative, absolute, fixed에 대해 알아보자!

10328 단어 absolutehtmlCSSfixedwecodefullstack4relative

CSS 레이아웃 관련 문제를 푸는데 위치를 잡는게 헷갈린다. 앞으로 사용할 일이 많을 것 같으니 정리해둔다. CodePen(클릭)에서 헷갈릴 때마다 연습하면서 익혀야겠다.

position 이란?

html 코드를 작성하면 순서대로 화면에 나타난다.
그런데 순서 상관없이 레이아웃을 내 마음대로 바꾸고 싶다!
이럴 때 사용 가능한 게 position 속성이다.

position 속성의 값은 네 가지가 있다.

  • position: static;
  • position: relative;
  • position: absolute;
  • position: fixed;

이중 position: static;은 자주 사용되지 않는다.
함께 자주 사용되는 relative, absolute 그리고 fixed에 대해 알아보자.

1. position: relative

position: relative 는 단독으로 쓰일 경우 특별한 기능은 없다.
따라서 이 속성을 가진 요소를 이동시키려면 top, right, bottom, left를 같이 이용한다.

<!--html 코드-->
<body>
  <div>div</div>
  <div class="relative"> div.relative </div>
  <div class="relative topleft">
    div.relative.topleft<br><br>
    relative 속성일 때! top:50px left:30px이면! <br>
	부모요소 기준 위쪽으로 50px만큼 띄우고!!<br> 
    왼쪽에 30px만큼 띄우라는 뜻!!!
  </div>
 </body>
/*css 코드*/
div {
  border: 1px solid red;
}
.relative {
  position : relative
}
.topleft {
  top : 50px; 
  left : 30px;
}

👆 이런 코드를 실행하면


👆 이런 결과가 나온다!

  • top에 음수-값을 주면 위로 겹쳐 올라간다. 아래는 CSS .topleft 속성값을 top:-30px로 바꾼 결과이다.

    👀 div.relative 박스 밑면 기준으로 30px만큼 겹쳐 올라갔죠?

2. position : absolute

position: absolute 는 특정 요소를 기준으로 한 위치를 정할 수 있다.
이때 기준은 position이 relative 또는 fixed 또는 absolute인 부모가 된다.
보통 부모요소에 position:relative를 부여한다.

  • div 요소의 영역 안에서 p 요소를 오른쪽 아래에 나타나게 하려고 한다.
  • 그렇다면 div를 기준으로 움직이므로 div태그에 relative 속성을 주고, p태그에 absolute 속성을 준다.
  • 그 후 CSS로 right:0, bottom:0 속성을 주면 아래와 같이 완성된다.
  • 만약 bottom:0 속성을 적용해도 div영역 바닥에 완전히 붙지 않는다면 p태그에 margin:0을 적용한다.


주의할 점 1 : 부모요소(absolute의 기준이 되는 요소)에 relative를 부여해야 한다. 즉 absolute의 태그가 형제요소에 relative속성을 준다고 형제요소가 absolute의 기준이 되지는 않는다.

주의할 점 2
p는 블록 요소이기 때문에 원래대로라면 너비값이 상위 요소(예제에서는 div)너비가 된다. 하지만 absolute를 적용한 순간 inline 요소가 되기 때문에 p의 너비는 내용의 너비가 된다.

<!--html-->
<body>
  <div class="relative"> 나는 div	
    <p class="absolute right-0"> 나는 p </p>
  </div>
</body>
/*css*/
.relative {
  position : relative
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

3. position : fixed

fixed는 요소를 화면에 고정시킨다. 애플 홈페이지 https://www.apple.com/ 에 들어가면, 스크롤을 내려도 헤더는 고정되어있다. 이런 부분을 fixed를 이용해서 만든다.

fixed를 이용해 간단히 따라해 보자.

header {
 position:fixed;
 left:0;
 right:0;
 top:0;
 height: 48px;
 background-color: rgba(45,45,45,0.95);
}
  • 원하는 셀렉터(ex.header)에 position:fixed를 적용한다.
  • top, right, bottom, left를 이용해 위치를 적용한다.
    ex. left: 0은 브라우저의 왼쪽에서 0만큼 떨어져 있다는 의미이다.

참고자료

https://learnlayout.com/no-layout.html
https://poiemaweb.com/css3-layout
https://poiemaweb.com/css3-box-model

[Python] 두 개의 키를 람다 표현식으로 정렬
iPhone http 게시 물 데이터

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage