javascript - 如何重叠子项，同时保持父项在 flex 方向列中不变

Question

我有两个父 flex 元素，定位为 flex-direction: column。

第一个 parent 有两个 child 。一个 child 是可选的，有时会被删除。

我希望可选子项位于另一个子项之上。当我添加/删除可选内容时，我希望布局不受影响。

我尝试在可选子项上设置负边距(请参阅注释的CSS)，然后下面的外部父项与第一个父项与子项重叠。

为什么会发生这种情况？如何重叠两个 child ，同时保持外部 parent 不变？

<div class='container'>
  <div class='parent'>
    <div class='child'>
      content
    </div>
    <div class='child optional'>
      more content
    </div>
  </div>
  <div class='parent'>
    content
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
}
.parent {
  width: 10vw;
  border: 1px solid black;
}

.child {  
  border: 1px solid red;
  height: 50px;
}

.optional {
  /* margin-top: -60px; */
}

http://codepen.io/eguneys/pen/JdzWqK

Answer 1

我给您的第一个建议是不要使用带有空格的类名，例如“可选子代”。选择一个名称，如“可选子项”。
我的第二个建议是几乎从不使用负边距。我什至无法想象它可能是一个好的解决方案的情况。
问题的解决方案可能是:将类名为“option-child”的div标签设置在类名为“child”的div标签之前。如果你想用js代码删除它，使用命令
document.getElementByClassName("可选子项")='0px'