툴팁, 드롭다운, 모달, 고정 버튼, sticky 필터 바 같은 거 👇

1️⃣ 툴팁 (absolute + relative)

<div class="tooltip-wrapper">
  버튼
  <div class="tooltip">툴팁 내용</div>
</div>

.tooltip-wrapper {
  position: relative;
  display: inline-block;
  margin: 50px;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  background: black;
  color: white;
  padding: 6px 10px;
  white-space: nowrap;
  font-size: 12px;
  border-radius: 4px;
  margin-top: 4px;
  display: none;
}

.tooltip-wrapper:hover .tooltip {
  display: block;
}

🔹 사용 이유:

툴팁은 항상 대상 요소 기준으로 위치해야 하니까 wrapper → relative, tooltip → absolute.

2️⃣ 모달 팝업 (fixed + overlay)

<div class="overlay">
  <div class="modal">모달 내용</div>
</div>

.overlay {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

🔹 사용 이유:

fixed는 화면 기준이니까 모달이 스크롤과 상관없이 가운데 고정됨.

z-index로 위로 띄움.

3️⃣ 우측 하단 고정 버튼 (fixed)

<button class="float-btn">+</button>

.float-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: hotpink;
  color: white;
  font-size: 24px;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 999;
}