版面配置
位置
用於控制元素在文件中定位方式的實用工具。
| 類別 | 樣式 |
|---|---|
靜態 | position: static; |
固定 | position: fixed; |
絕對 | position: absolute; |
相對 | position: relative; |
黏性 | position: sticky; |
範例
靜態定位元素
使用 static 實用工具來根據文件的正常流程定位元素
靜態父元素
絕對子元素
<div class="static ..."> <p>Static parent</p> <div class="absolute bottom-0 left-0 ..."> <p>Absolute child</p> </div></div>對於靜態定位的元素，任何偏移量都將被忽略，並且該元素不會作為絕對定位子元素的位置參考。
相對定位元素
使用 relative 實用工具來根據文件的正常流程定位元素
相對父元素
絕對子元素
<div class="relative ..."> <p>Relative parent</p> <div class="absolute bottom-0 left-0 ..."> <p>Absolute child</p> </div></div>對於相對定位的元素，任何偏移量都會相對於元素的正常位置計算，並且該元素將作為絕對定位子元素的位置參考。
絕對定位元素
使用 absolute 實用工具將元素定位在文件正常流程的外部，導致相鄰元素表現得好像該元素不存在一樣
使用靜態定位
相對父元素
靜態父元素
靜態子元素？
靜態同層元素
使用絕對定位
相對父元素
靜態父元素
絕對子元素
靜態同層元素
<div class="static ..."> <!-- Static parent --> <div class="static ..."><p>Static child</p></div> <div class="inline-block ..."><p>Static sibling</p></div> <!-- Static parent --> <div class="absolute ..."><p>Absolute child</p></div> <div class="inline-block ..."><p>Static sibling</p></div></div>對於絕對定位的元素，任何偏移量都會相對於具有 static 以外的其他位置的最近父元素計算，並且該元素將作為其他絕對定位子元素的位置參考。
固定定位元素
使用 fixed 實用工具將元素相對於瀏覽器視窗定位
滾動此元素以查看固定定位的效果
聯絡方式
安德魯·艾爾弗雷德
黛布拉·休斯頓
珍·懷特
雷·弗林特
敏蒂·艾爾布雷希特
大衛·阿諾德<div class="relative"> <div class="fixed top-0 right-0 left-0">Contacts</div> <div> <div> <img src="/img/andrew.jpg" /> <strong>Andrew Alfred</strong> </div> <div> <img src="/img/debra.jpg" /> <strong>Debra Houston</strong> </div> <!-- ... --> </div></div>對於固定定位的元素，任何偏移量都是相對於視窗計算的，並且該元素將作為絕對定位子元素的定位參考。
黏性定位元素
使用 sticky 工具將元素定位為 relative，直到它跨越指定的閾值，然後將其視為 fixed，直到其父元素離開螢幕。
滾動此元素以查看黏性定位的效果。
A
安德魯·艾爾弗雷德艾莎·休斯頓安娜·懷特安迪·弗林特B
鮑伯·艾爾弗雷德比安卡·休斯頓布莉安娜·懷特伯特·弗林特C
柯爾頓·艾爾弗雷德辛西婭·休斯頓夏安·懷特查理·弗林特<div> <div> <div class="sticky top-0 ...">A</div> <div> <div> <img src="/img/andrew.jpg" /> <strong>Andrew Alfred</strong> </div> <div> <img src="/img/aisha.jpg" /> <strong>Aisha Houston</strong> </div> <!-- ... --> </div> </div> <div> <div class="sticky top-0">B</div> <div> <div> <img src="/img/bob.jpg" /> <strong>Bob Alfred</strong> </div> <!-- ... --> </div> </div> <!-- ... --></div>對於黏性定位的元素，任何偏移量都是相對於元素正常位置計算的，並且該元素將作為絕對定位子元素的定位參考。
響應式設計
前綴a position 工具 帶有像 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上時套用該工具
<div class="relative md:absolute ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
