html - 相对定位的 parent 不能作为绝对定位的 child 的 anchor

This question already has answers here:

Position absolute but relative to parent
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    
绝对定位的元素使用body元素作为锚，而不是父a元素

* { box-sizing: border-box }
a { text-decoration: none  }
body { font-family: Calibri; padding-top: 30px; }

#menu {
    border: 1px solid red;
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
}

#menu > a {
    position: relative;
}

#menu > a, #submenu > a {
    width: 100px;
    line-height: 40px;
    text-align: center;
    background-color: rgb(238, 238, 238);
    border-right: 1px solid black;
}

#menu > a:hover, #submenu > a:hover {
    background-color: #fff;
}

#submenu {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 40px;
}

<div id="menu">
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
        <div id="submenu">
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
        </div>
    <a href="#">Menu Item</a>
</div>

最佳答案

根据您的问题absolute-submenu应该在relative-menu3之内，只需修复标记，希望这是您面临的问题

* { box-sizing: border-box }
a { text-decoration: none  }
body { font-family: Calibri; padding-top: 30px; }

#menu {
    border: 1px solid red;
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
}

#menu > a {
    position: relative;
}

#menu > a, #submenu > a {
    width: 100px;
    line-height: 40px;
    text-align: center;
    background-color: rgb(238, 238, 238);
    border-right: 1px solid black;
}

#menu > a:hover, #submenu > a:hover {
    background-color: #fff;
}

#submenu {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 40px;
}

<div id="menu">
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
    <a href="#">
        Menu Item
        <p id="submenu">
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
        </p>
    </a>
    <a href="#">Menu Item</a>
</div>