Framer 教學筆記 📐

/* 絕對定位：相對於父層 */
.child {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px; /* 兩側釘選，拉伸寬度 */
  z-index: 10;
}

/* 父層必須有相對定位，才能作為錨點 */
.parent {
  position: relative;
}

/* Framer Stack，CSS Flexbox */
.stack {
  display: flex;
  flex-direction: row;       /* 方向：水平 */
  justify-content: space-between; /* 分佈 */
  align-items: center;      /* 對齊 */
  gap: 16px;                /* 間距 */
  padding: 20px;            /* 內距 */
  flex-wrap: wrap;         /* 換行 */
}

/* Fill，flex-grow */
.fill-item {
  flex: 1;     /* = 1fr，佔等比空間 */
}
.fill-item-2 {
  flex: 2;     /* = 2fr，佔兩倍空間 */
}

/* Fit Content，width/height: fit-content */
.fit-parent {
  width: fit-content;
  height: fit-content;
}

/* Framer Grid，CSS Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3欄 */
  gap: 16px;
}

/* 跨欄 (Span) */
.featured-item {
  grid-column: span 2; /* 佔2欄 */
  grid-row: span 2;    /* 佔2列 */
}

/* 固定定位 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 黏性定位（需要父層 overflow: visible）*/
.sidebar {
  position: sticky;
  top: 80px; /* 距視區頂部 80px 時開始黏 */
}

/* ⚠️ 父層不能有 overflow: hidden/auto */
.parent {
  overflow: visible; /* 必須！ */
}

/* 背景滿版 + 內容有最大寬度限制 */
.section {
  width: 100%;               /* 背景填滿 */
  background: #f0f0f0;
  display: flex;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 880px;           /* 限制內容不過寬 */
  padding: 80px 20px;
}