https://benzhub.github.io/tags/%E5%AE%9A%E4%BD%8D/Recent content in 定位 on BenzHubHugozh-TWTue, 11 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/011-positioning/Tue, 11 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/011-positioning/<blockquote> <p>在 <strong>TailwindCSS</strong> 裡，<strong>定位系統（Positioning）</strong> 是讓元素「脫離正常文件流」、精準釘在畫面任意位置的關鍵工具——只要用 <code>relative</code>、<code>absolute</code>、<code>fixed</code>、<code>sticky</code> 決定定位模式，再用 <code>top</code>／<code>right</code>／<code>bottom</code>／<code>left</code>（或簡寫 <code>inset-*</code>）指定偏移、<code>z-*</code> 控制層疊順序，就能一組 utility 做出黏性導覽列、卡片徽章、下拉選單、彈窗遮罩這些過去得靠一整段 CSS 才能完成的疊層 UI。這是 <strong>TailwindCSS 完整教學</strong> 系列的第十一篇，我們會把 <strong>position</strong> 五種模式、<code>inset</code> 偏移、負值、<strong>z-index</strong> 與堆疊脈絡、以及 <strong>sticky</strong> 實務一次講透，並以 v4 為預設、標註與 v3 的差異。</p> </blockquote>