在固定元素内相对于页面的位置固定元素

我有一个固定的容器，它在页面上垂直和水平居中，并且在该容器内有一个元素。理想情况下，我希望将此元素放置在窗口的最左上角，但我正在努力使其工作。在固定元素内相对于页面的位置固定元素

这个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'，它不适合这种情况，所以对于这种方法应该知道高度。 –

在固定元素内相对于页面的位置固定元素

回答

相关问题