Position, Display 속성

📊 `position` vs `display` 관계 요약표

`position` 값	사용 의도 요약	자주 함께 쓰는 `display`	설명
`static`	기본값	`block`, `inline`, etc.	기본 흐름에 따라 배치됨. top/left 등 무시됨.
`relative`	자기 기준 이동	`block`, `inline`, etc.	원래 위치를 기준으로 이동. z-index 설정 가능.
`absolute`	부모 기준 이동	무시됨 (사실상 블록처럼 동작)	가장 가까운 `position: relative/absolute/fixed` 부모 기준으로 위치 지정됨. DOM 흐름에서 빠짐.
`fixed`	화면 기준 고정	무시됨 (viewport 기준 위치)	스크롤해도 고정됨. 항상 화면 기준.
`sticky`	스크롤 따라감 + 고정됨	`block`, `table`, etc.	스크롤 위치에 따라 `relative` → `fixed`처럼 변함. 부모 높이 영향 받음.

⚠️ 브라우저 지원

💡 참고 사항

absolute, fixed, sticky는 display의 영향을 거의 안 받아.

즉 display가 뭐든 상관없이 레이아웃에서 빠지고 자유롭게 위치 잡음.
static, relative는 기본 레이아웃 흐름에 남아 있어서 display랑 더 밀접하게 작용해.
absolute 요소는 block처럼 보이지만 실제로는 display: inline이어도 block처럼 동작함.

그래서 별도로 display: block을 줄 필요는 없음.

속성	IE 지원 여부
`position: sticky`	❌ IE 미지원
나머지 (`static`, `relative`, `absolute`, `fixed`)	✅ IE 완전 지원

🎯 예제: `position: absolute` vs `position: static`

<!DOCTYPE html>
<html lang="ko">
	<head>
	<meta charset="UTF-8" />
	<title>Position vs Display</title>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: #eee;
      border: 2px solid #ccc;
      margin-bottom: 20px;
    }

    .static-box {
      display: inline-block;
      background-color: skyblue;
      padding: 10px;
    }

    .absolute-box {
      position: absolute;
      top: 20px;
      left: 100px;
      background-color: hotpink;
      color: white;
      padding: 10px;
      /* display: inline-block; <- 있어도 의미 없음 */
    }
  </style>
</head>
<body>

  <h2>Static 요소 (기본 흐름)</h2>
  <div class="container">
    <div class="static-box">Box 1</div>
    <div class="static-box">Box 2</div>
  </div>

  <h2>Absolute 요소 (부모 기준 위치 이동)</h2>
  <div class="container">
    <div class="static-box">Box 1</div>
    <div class="absolute-box">Box 2 (absolute)</div>
  </div>

</body>
</html>

🧠 요점 정리

첫 번째 박스들은 display: inline-block이고 position: static이라서 흐름대로 좌→우로 쌓여.
두 번째 박스는 position: absolute라서 흐름에서 빠지고, 부모 .container를 기준으로 (top: 20px, left: 100px)에 위치함.
display는 absolute일 때 사실상 무시됨. inline, block, inline-block 다 넣어도 박스처럼 보이고 위치에 영향 없음.

📊 position vs display 관계 요약표

⚠️ 브라우저 지원

💡 참고 사항

🎯 예제: position: absolute vs position: static

🧠 요점 정리

📊 `position` vs `display` 관계 요약표

🎯 예제: `position: absolute` vs `position: static`