CSS transform 導致 position: fixed 失效問題分析

1、問題描述

在以下示例中，.size-guide-modal設置了position: fixed，

但由于其父元素.grid-item2應用了transform屬性，導致fixed定位失效。

2、問題代碼示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body {
            display: grid;
        }
        .grid {
            display: flex;
            flex-wrap: wrap;
        }

        .grid-item1 {
            max-width: 65%;
            width: 65%;
            background-color: #f0f0f0;
            height: 400px;
        }

        .grid-item2 {
            max-width: 35%;
            width: 35%;
            background-color: #e0e0e0;
            height: 400px;
            transform: translateY(0px); /* 導致fixed失效的transform */
        }

        .size-guide-modal {
            display: block;
            position: fixed;
            z-index: 999;
            left: 0;
            top: 0;
            width: 35%; 
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            animation: slideIn 0.5s ease-in-out forwards;
        }
    </style>
</head>
<body>
    <div class="" style="box-sizing: inherit;">
        <div class="grid">
            <div class="grid-item1"></div>
            <div class="grid-item2">
                <div><div><div class="size-guide-modal">Size Guide Modal</div></div></div>
            </div>
        </div>
    </div>
</body>
</html>

3、問題表現

.size-guide-moda本應相對于視口固定定位

但實際上會相對于.grid-item2定位

導致模態框位置異常

4、解決方案

方案1：移除transform屬性（推薦）

.grid-item2 {
    /* 移除transform屬性 */
    max-width: 35%;
    width: 35%;
    background-color: #e0e0e0;
    height: 400px;
}

方案2：調整DOM結構

	<div class="" style="box-sizing: inherit;">
        <div class="grid">
            <div class="grid-item1"></div>
            <div class="grid-item2"></div>
        </div>
        <!-- 將fixed元素移到transform父級之外 -->
        <div class="size-guide-modal">Size Guide Modal</div>
    </div>

方案3：改用absolute定位（需配合JS）

.size-guide-modal {
    position: absolute;
    top: 0;
    left: 65%; /* 與.grid-item1寬度匹配 */
    width: 35%;
    height: 100%;
}

5、總結

transform會改變position: fixed的定位基準
最簡單的解決方法是移除不必要的transform
必須保留transform時，調整fixed元素的DOM位置

posted @ 2025-05-21 18:42 pine007 閱讀(199) 評論(0) 收藏舉報

刷新頁面返回頂部