太菜了，请教一个 css 布局的问题，总是整不明白。

如上图所示，黑色是已经有框架布局。彩色是新的需求。 就是添加一个工具栏，有一个 button 。按下它，就会弹出一菜单。菜单需要和 button 左侧对齐。

button & menu 都是现成的组件

下面这个是我画出来的

// 我自己设想的结构 <div class="toolbar"> <div class="container"> <div class="mybutton"> if showmenu && ( <menu />) // 我们框架是 react 的，点击 button，改变 state，显示 /隐藏 menu </div> </div> </div> 

.toolbar { position: absolute; top: 广告栏 top + height + 5px; left: 0; } .container { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; // 我本来是想让 button 和 menu 在 flex 的作用下，自己对齐，结果不工作。 } // menu 是一个 legacy 组件，内部有很复杂的计算 top, left 等等的计算。现在是和打开它的 button 居中对齐。 

请教一下大家，这样的布局怎么做比较好？ 是直接用 position 算？还是用 flex 把内部的框起来？

大概怎么写这个 css 布局？

谢谢！

p.s.改 legacy code，还要写 css, 真是......