absolute元素如何超出其父级relative元素的宽度？

Question

想实现子菜单的自适应宽度，但是二级菜单是一级菜单relative的absolute子节点，其宽度被父级限制住了，使用left:-20px,right:-20px,这种能加宽二级菜单，但是不能实现宽度自适应，并且对齐也不好做，请问各位有何高招？

Answer 1

父菜单不用relative;子菜单也不用left,right而使用margin定位即可；

Answer 2

在二级菜单设置word-break:keep-all;

Answer 3

可以给子元素一个宽度 比如 width:120%

Answer 4

你具体需要达到什么效果？ 一级菜单指的是整个导航的宽度还是operation Tool这种小区域的宽度？
二级菜单是对齐operation Tool这种小区域还是怎样？对齐倒是不难，大不了用js left=(父元宽度-自适应子元素宽度)/2就行了，问题你需求不明，光看你描述不知道你要怎样。

Answer 5

可以换一种布局，简单说一下我觉得比较好的实现方案

上面三个label，每个label里面放三个radio，下面的一个div里面装三个小div，每个小div里放一个藏起来的radio和用来装内容的div；
然后，三个label的for分别指向小div里面的radio的id，通过radio:checked + div { //css }来控制显示哪一个,上面的label里面的radio控制显示点击了的label，这样就不存在宽度的问题了

Answer 6

的确啊，红色部分是relative元素，绿色是absolute元素，绿色部分在不设置宽度的情况下，其宽度是没法超过红色的。

Answer 7

这个你解决了没，我也遇到这个问题