css - 将绝对定位的元素带回到 flexbox 父元素的流中

Question

我正在处理带有导航和嵌套子导航的布局。子导航的底部需要与父元素的底部对齐。为了节省您的阅读时间，最简单的描述方式是指向我制作的这个 CodePen。

http://codepen.io/freshyill/pen/drxaJ

现在，实际解释一下我要做什么:

• 导航(特别是子导航)需要与父导航的底部对齐。
• 父元素是 display: flex 和 justify-content: flex-end，因此导航将对齐到底部。
• 主导航是水平的，position: relative。
• 子导航也是水平的，position: absolute 在导航下方。
• 搜索区域的高度未知，不需要与父级顶部对齐

问题在于，由于子导航是 position: absolute，所以主导航(而不是子导航)实际上位于底部，并且子导航位于父导航之外。

还有一些事情......

• 我几乎无法控制导航列表的标记。
• 我可以通过在子导航上设置高度并为主导航提供相同值的底部边距来解决这个问题。我正在努力避免这种情况。
• 真正的子导航将翻转显示其他子导航
• 我愿意考虑将子导航移至导航下方的其他解决方案。

Answer 1

恕我直言，不需要绝对位置，您可以改用负边距。

例如，如果子菜单是第三个按钮下的子菜单，要重置其左偏移量，只需执行 margin-left:-200%

演示:http://jsfiddle.net/rupco3wh/

这是解决方案的关键:

ul.navlist > li > ul.subnav
{
    width:400%;
}

ul.navlist > li:nth-child(2) > ul.subnav
{
    margin-left:-100%;
}

ul.navlist > li:nth-child(3) > ul.subnav
{
    margin-left:-200%;
}

ul.navlist > li:nth-child(4) > ul.subnav
{
    margin-left:-300%;
}

希望它能满足你的需求