Position(Static, Relative, Absolute, and fixed)

Jayson Hwang·2022년 4월 26일
0

WeCode(TIL)

목록 보기
2/4

🗒 Position 속성

태그를 어떻게 위치시킬지를 정의하며, 상대적 관계를 통해 HTML의 요소를 자유롭게 위치시키는 속성

static: 기본값, 위치 임의로 설정 불가
relative: 원래 있던 위치를 기준으로 좌표를 지정
absolute: 절대 좌표와 함께 위치를 지정
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정


📌 Static

작성된 태그가 순차적으로 나열되는 default값

  • 좌표 프로퍼티(top, right, bottom, left)를 함께 사용하는 것이 불가하며, 사용할 경우에는 무시

📌 Relative

기본적으로 표시된 위치를 기준으로 새로운 위치를 지정 가능
새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 같음

  • 일반적으로 relative만으로 요소의 위치를 이동시키는데 사용되지 않고,
    absolute의 기준으로써 사용됨

  • 좌표 프로퍼티(top, right, bottom, left)가 있어야 원래의 위치에서 이동 가능

div.relative {
    position:   relative;
    left:       10px;
    top:        -10px;
}

📌 Absolute

특정부모에 의해 절대적으로 움직임

  • 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨

  • 일반적으로 absolute를 쓸 경우,
    절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여

<html>
 <head>
  <style>
    body { margin: 0; }
    .parent {
      position: relative;
      width: 200px;
      height: 200px;
    }
    .absolute-box {
      position: absolute;
      height: 200px; 
      width: 200px;
      top: 50px; 
      left: 50px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="absolute-box">absolute box (in parent)</div>
  </div>
  <div class="absolute-box">absolute box (no parent)</div>
 </body>
</html>

📌 Fixed

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치가 고정(fixed)

  • fixed는 부모를 필요로 하지 않음

  • fixed 프로퍼티 선언 시 주의할 점,
    block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야함

  • 주로 웹사이트에서 메뉴바를 만들때 자주 이용

div.footer-bar { 
    position:   fixed;
    left:       0;
    bottom:     0;
    width:      100%;
    height:     32px;
}

profile
"Your goals, Minus your doubts, Equal your reality"

0개의 댓글