在固定元素內相對於頁面的位置固定元素

我有一個固定的容器，它在頁面上垂直和水平居中，並且在該容器內有一個元素。理想情況下，我希望將此元素放置在窗口的最左上角，但我正在努力使其工作。在固定元素內相對於頁面的位置固定元素

這個JS斌說明了這個問題。

https://jsbin.com/nodonatifo/edit?html,css,output

起初我還以爲我只是能夠做這樣的事情的元素。

#container { 
 
    width: 300px; 
 
    height: 400px; 
 
    background-color: #55ffdd; 
 
    /* Center on page */ 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
#element-actual { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<div id="container"> 
 
    <div id="element-actual"></div> 
 
</div>

然而，僅僅修復了父容器的左上角，而不是在窗口中的元素。

這可能與我目前的樣式？

來源

2015-11-26 joshfarrant

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**。儘管您已經提供了一個示例鏈接，但如果鏈接無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

注意並修復。 – joshfarrant

如果你使用'position：fixed' ......爲什麼它需要成爲一個孩子？ –

由於Gaurav Aggarwal已經pointed out，固定元素仍然是相對於父變換的定位。如果您希望容器元素被動態定位（即使它具有未知尺寸），那麼您可以使用以下方法並避免使用transform: translate(-50%, -50%)進行垂直/水平居中。

該方法主要定位所述容器元件以填充窗口元件的高度/寬度與top: 0/right: 0/bottom: 0/left: 0，然後它中心縱向/橫向使用margin: auto。

Example Here

#container { 
 
    width: 300px; 
 
    height: 400px; 
 
    position: fixed; 
 
    top: 0; right: 0; 
 
    bottom: 0; left: 0; 
 
    margin: auto; 
 
    background-color: #55ffdd; 
 
} 
 
#element-actual { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
}

<div id="container"> 
 
    <div id="element-actual"></div> 
 
</div>

來源

2015-11-26 17:13:46

但這會使'＃容器'按照窗口全高顯示 –

@GauravAggarwal你確定嗎？這似乎並沒有發生在我提供的例子中。 –

是的，我確定，因爲在你提供的身高的例子中仍然是已知的。嘗試刪除「高度」屬性，然後你會看到問題 –

#container { 
    width: 300px; 
    height: 400px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    background-color: #55ffdd; 
    margin-top: -200px; 
    margin-left: -150px; 
}

如果使用translate屬性，則其子格將相對放置到父DIV唯一即使是position:fixed所以你可以使用上面的代碼放置在中心#container和你紅格會相對放置該窗口不是父分區:)

來源

2015-11-26 17:07:48

謝謝，這很好，並解決了這個問題。如果容器的高度未知，是否可以實現相同的垂直居中，而不會破壞固定元件的位置？ – joshfarrant

不，因爲這隻適用於你之前的代碼'translate'，它不適合這種情況，所以對於這種方法應該知道高度。 –

在固定元素內相對於頁面的位置固定元素

回答

相關問題