魯斯前端布魯斯前端

文章中英模式

布魯斯前端面試題目 - 絕對定位與React Portal

深入理解CSS絕對定位的應用場景與陷阱，以及React Portal如何解決絕對定位元素的層級問題，掌握模態框、提示框等UI元素的最佳實現方式。

影片縮圖

懶得看文章？那就來看影片吧

CSS絕對定位的本質與行為

絕對定位（position: absolute）是CSS定位方式中最強大也最容易誤用的一種。當一個元素設置為絕對定位時，它會脫離正常文檔流，根據最近的已定位祖先元素進行定位。

絕對定位的關鍵特性

  • 1. 元素從正常文檔流中移除，不佔據空間
  • 2. 相對於最近的已定位祖先元素定位（position非static）
  • 3. 若無已定位祖先，則相對於視口（viewport）
  • 4. 可使用top、right、bottom、left精確控制位置
  • 5. z-index屬性影響在Z軸上的堆疊順序
.parent {
  position: relative; 
  width: 300px;
  height: 200px;
}

.child {
  position: absolute; 
  top: 20px;
  left: 30px;
}

絕對定位的常見使用場景

懸浮在其他元素上方的UI元素

  • 1. 模態框和對話框
  • 2. 工具提示和彈出框
  • 3. 下拉選單
  • 4. 固定位置的頭部或尾部

精確定位的設計元素

  • 1. 角標和徽章
  • 2. 特定位置的裝飾元素
  • 3. 重疊的卡片或圖片
  • 4. 圖片上的文字或按鈕

使用絕對定位的常見陷阱

儘管絕對定位非常有用，但它也帶來一些挑戰，尤其在複雜的UI或動態內容中：

常見問題

  • 父元素邊界約束

    絕對定位元素不會被父元素的padding或邊界限制

  • 可訪問性與鍵盤焦點

    可能導致鍵盤導航順序混亂

  • 內容溢出與裁剪

    父元素overflow屬性可能影響或裁剪絕對定位元素

  • DOM層級問題

    絕對定位元素可能被其他元素遮擋，z-index可能因定位上下文而無效

  • 響應式設計挑戰

    固定位置在不同屏幕尺寸可能導致不良體驗

React Portal：解決絕對定位的DOM層級問題

React Portal提供了一種將子元素渲染到父組件DOM層級之外的方法，這解決了絕對定位元素最常見的問題之一：DOM層級和z-index上下文限制。

React Portal的優勢

  • 1. 將元素渲染到DOM樹中的任何位置，通常是body底部
  • 2. 避免父元素的overflow、z-index或定位上下文的限制
  • 3. 維持React事件冒泡路徑，即使DOM結構斷開
  • 4. 適合實現全局UI元素，如模態框、通知等
import { createPortal } from 'react-dom';

function Modal({ isOpen, children, onClose }) {
  if (!isOpen) return null;
  
  return createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>關閉</button>
      </div>
    </div>,
    document.body // 渲染到body元素末尾，避免被其他元素遮擋
  );
}

🔥 常見面試題目

(一) absolute 與 fixed 與 sticky 區別

答：這三種定位方式的區別如下：

  • 絕對定位（position: absolute）：相對於最近的已定位父元素。如果找不到，就相對於視口。
  • 固定定位（position: fixed）：永遠相對於視口定位，不會隨頁面滾動而移動。
  • 粘性定位（position: sticky）：開始時像相對定位，滾動到特定位置後像固定定位。
/* 絕對定位 - 相對於父元素 */
.parent {
  position: relative;
}
.absolute-child {
  position: absolute;
  top: 10px;
  left: 20px;
}

/* 固定定位 - 相對於視口 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* 粘性定位 - 滾動到頂部時固定 */
.sticky-nav {
  position: sticky;
  top: 0;
}

(二) 什麼是React Portal？背後原理以及實際用例

答：React Portal讓你可以把組件渲染到DOM樹中的任何位置，而不只是父組件內部。

簡單理解：

  • 1. 正常情況下，子組件只能渲染在父組件內部
  • 2. 使用Portal後，可以把組件「傳送」到DOM樹的其他地方（通常是body下）
  • 3. 即使DOM結構變了，React事件還是按原本的組件層級傳遞
// 基本用法
import { createPortal } from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  
  return createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>關閉</button>
      </div>
    </div>,
    document.body  // 渲染到body下，不受父組件限制
  );
}

常見用途：

  • 模態框：避免被父元素的overflow或z-index限制
  • 提示框/彈出菜單：需要顯示在其他內容之上
  • 全局通知：在頁面頂部或角落顯示的消息提醒
// 使用示例
function App() {
  const [showModal, setShowModal] = useState(false);
  
  return (
    <div className="app">
      <button onClick={() => setShowModal(true)}>
        打開模態框
      </button>
      
      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
        <h2>這是一個模態框</h2>
        <p>我渲染在body下，不受父組件的CSS限制</p>
      </Modal>
    </div>
  );
}

Portal的好處是解決了「邏輯位置」和「視覺位置」不一致的問題，讓你能在保持React組件關係的同時，自由控制元素在頁面上的顯示位置。