在div上使用固定位置時出現意外行爲

我的<body />有<ion-nav-bar />和<ion-nav-view />。在一個<ion-view />的<ion-content />，我想補充一個<div />這需要整個屏幕的寬度和高度（即完全覆蓋了所有其他元素），所以我加了以下樣式：在div上使用固定位置時出現意外行爲

position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0;

奇怪的是，頂部<div />沒有到達屏幕的頂部，而是到達<ion-nav-bar />的底部。任何想法爲什麼？

這是一個你可以玩的摔跤手：http://plnkr.co/edit/q2iynXaMnTZ2fGqzlJZo。您會看到紅色邊框不包含標題。看看home.html和style.css文件。

我必須誤解一下固定位置，我認爲寬度固定的位置，一個元素相對於瀏覽器窗口的位置。那麼我錯在哪裏？以及如何使我的固定<div />採取整個屏幕？

來源

2015-10-12 sp00m

如果父母有'位置：相對/絕對'，絕對位置div將調整到哪個位置。 – LGSon

現在，由於您無法移除'transform'，因此您可以直接在div後面添加一個'script'標記並計算x/y座標並將其設置爲負數。 ......好吧，你可以將它添加到任何你想要的地方:) – LGSon

但是，您的理解是正確的，但是，當您在祖先上使用transform時，固定位置後代相對於它定位。

如此，因爲（您的固定元素的祖先）：

<div style="transform: translate3d(0px, 0px, 0px) scale(1);" class="scroll padding">

是使用transform，這些固定件座標是相對於這個div的大小。如果您要刪除轉換，您將獲得預期的結果。

來源

2015-10-12 18:58:31 Natsu

謝謝，但有沒有其他方式，而不是*刪除變換*？恐怕這可能會破壞一些其他的工作行爲...... – sp00m

除非你刪除'transform'，否則使用固定位置是不可能的。除非你可以刪除它，然後將其應用於上面的一個祖先 – Natsu

在div上使用固定位置時出現意外行爲

回答

相關問題