Position fixed element within fixed element relative to page - html

Question

I've got a fixed container which is vertically and horizontally centred on the page, and an element within that container. Ideally I would like to have this element positioned in the very top left of the window, however I'm struggling to make it work.
This JS Bin illustrates the problem.
https://jsbin.com/nodonatifo/edit?html,css,output
Initially I thought I would just be able to do something like this on the element.
#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>
However that just fixes the element in the top left corner of the parent container, rather than the window.
Is this possible with my current styles?

Answer 1

#container {
width: 300px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
background-color: #55ffdd;
margin-top: -200px;
margin-left: -150px;
}
If you use translate property then its children div will place relatively to the parent div only even when it is position:fixed so you can use the above code to place #container in center and you red div will be placed relatively to the window not the parent div :)

Answer 2

As Gaurav Aggarwal already pointed out, the fixed element will still be relative to the parent's transformed positioning. If you want the container element to be dynamically positioned (even if it has unknown dimensions), then you could use the following approach and avoid using transform: translate(-50%, -50%) for vertical/horizontal centering.
This method essentially positions the container element to fill the height/width of the window element with top: 0/right: 0/bottom: 0/left: 0, and then centers it vertically/horizontally using 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>

Answer 3

Easy, add this to the child:
position: sticky;