CSS Transform DIV without transform child - html

Question

I'm trying to centralize a DIV with Transform in CSS, but I have another child inside which was suposed to float in an absolute position:
#container {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
.popup {
top: 30px;
left: 30px;
position: absolute;
display: none;
}
.popuptrigger:focus + .popup {
display: initial;
}
<div id="container">
<input class="popuptrigger">
<div class="popup">Something else</div>
</div>
Unfortunately, popup div are aligning itself at top/left of container div
How can I do this works without javascript or jQuery, i need to be pure CSS

Answer 1

Depending on what information you need to display, you could center the input itself and remove it from the container. You can then provide any other information in the container, making sure not to overlap the input.
Example
.popuptrigger {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 3em;
text-align: center;
background: #F00;
padding: 10px;
}
.popup {
position: absolute;
top: 30px;
left: 30px;
display: none;
}
input {
display: block;
margin-bottom: 10px;
}
.popuptrigger:focus + .popup {
display: initial;
}
<input class="popuptrigger" value="firstInput">
<div class="popup">This is the popup text.</div>
<div class="container">
<input value="second input">
<input value="third input">
</div>