国产视频app在 html 頁面的css樣式中,如果將 position 屬性的值設置為 fixed,那就表示其元素的位置相當于顯示設備的可視區域進行定位,而今天在調試此屬性時,卻發生了一件奇怪的事件。

position:fixed 定位失效情況復現

失效代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{
        height: 150%;
        width: 100%;
        transform: translate(0, 0);
    }
    div{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 200px;
        margin: -100px 0 0 -50px;
        background-color: brown;
    }
</style>
<body>
    <div></div>
</body>
</html>

代碼動行結果:

QQ截圖20191014234509.jpg

注意:

国产视频app1、代碼的樣式是規定DIV元素模塊,在瀏覽器的可視窗口中,上下左右居中

2、實際的顯示效果,DIV模塊已經向上偏移

position:fixed 定位問題解決方法

国产视频app通過排查代碼,可以發現,在 body 樣式屬性中,有個 transform: translate(0, 0) 屬性,去掉此屬性后,position:fixed 定位問題解決

修復后的代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{
        height: 150%;
        width: 100%;
    }
    div{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 200px;
        margin: -100px 0 0 -50px;
        background-color: brown;
    }
</style>
<body>
    <div></div>
</body>
</html>

代碼運行結果:

QQ截圖20191014235319.jpg

position:fixed 定位出錯的原因

關于此問題的出現,牽涉到了堆疊上下文人概念 (Stacking Context)。

堆疊上下文,是 HTML 元素的三維概念,這些 HTML 元素在一條假想的相對于面向(電腦屏幕的)視窗或者網頁的用戶的 z 軸上延伸,HTML 元素依據其自身屬性按照優先級順序占用層疊上下文的空間。

1、任何非 none 的 transform 值都會導致一個堆疊上下文創建。

国产视频app2、由于堆疊上下文的創建,該元素會影響其子元素的固定定位。設置了 position:fixed 的子元素將不會基于 可視窗口定位,而是基于這個父元素。