html - 没有变换子项的 CSS 变换 DIV

Question

我试图在 CSS 中使用 Transform 集中一个 DIV，但我在里面有另一个 child 应该 float 在一个绝对位置:

#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>

不幸的是，弹出式 div 将自身对齐到容器 div 的顶部/左侧

如果没有 javascript 或 jQuery，我怎么能做到这一点，我需要纯 CSS

Answer 1

根据您需要显示的信息，您可以将输入本身居中并将其从容器中移除。然后您可以在容器中提供任何其他信息，确保不要与输入重叠。

例子

.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>