将绝对定位的元素带回 flexbox 父元素的流程中答案

【问题标题】：Bring absolutely positioned element back into flow of flexbox parent element将绝对定位的元素带回 flexbox 父元素的流程中
【发布时间】：2014-08-20 15:02:48
【问题描述】：

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

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

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

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

问题在于，由于子导航是position: absolute，因此主导航，而不是子导航实际上在底部，而子导航在父导航之外。

还有一些事情……

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

【问题讨论】：

悬停时会出现子导航吗？
请在您的问题中发布您的 Codepen 中的 HTML 和 CSS。它现在可能看起来不是特别有用，但是如果您链接的“笔”被删除或丢失，那么您的问题对于未来寻找答案的访问者将变得毫无用处

标签： css flexbox

【解决方案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%;
}

希望它符合您的需求

【讨论】：