如何在保持父母不变的情况下重叠孩子在弹性方向列中答案

【问题标题】：How to overlap children while keeping parents as is in flex direction column如何在保持父母不变的情况下重叠孩子在弹性方向列中
【发布时间】：2015-08-09 17:00:23
【问题描述】：

我有两个父 flex items 定位为 flex-direction: column。

第一个父母有两个孩子。一个孩子是可选的，有时会被移除。

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

我尝试在可选子项上设置负边距（参见注释的 css），然后下面的外部父项与第一个父项与子项重叠。

为什么会发生这种情况，我如何在保持外部父母不变的同时重叠两个孩子？

<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

【问题讨论】：

标签： javascript html css flexbox

【解决方案1】：

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

【讨论】：