Absolute positioning appears under div-CodePudding

I have the following page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute positioning</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
            overflow: hidden;
        }
        body {
            display: grid;
            grid-template-columns: min-content 1fr;
            grid-template-rows: min-content 1fr min-content;
            grid-template-areas: 
                "logo header" 
                "menu main" 
                "footer copyright";
            background: #f1f4fd;
            font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
            font-size: 1em;
            color: #777d8b;
        }
        #logo {
            grid-area: logo;
            background: #7186c7;
            color: #fff;
        }
        #header {
            grid-area: header;
        }
        #menu {
            grid-area: menu;
            overflow-y: scroll;
            background: #7186c7;
            color: #fff;
            padding: 1em;
            min-width: 3em;
        }
        #main {
            grid-area: main;
            overflow-y: scroll;
        }
        #footer {
            grid-area: footer;
            background: #7186c7;
            color: #fff;
        }
        #copyright {
            grid-area: copyright;
            font-size: .9em;
        }
        .rel { position: relative; }
        .abs {
            position: absolute;
            left: 100px;
            top: 0;
            background: #c00;
            width: 100px;
            height: 100px;
        }
        .bott { margin-top: 100px; }
    </style>
</head>
<body>
    <header id="logo">Logo</header>
    <header id="header">Header</header>
    <nav id="menu">
        <ul >
            <li>test</li>
        </ul>
        <ul >
            <li >test</li>
        </ul>
    </nav>
    <main id="main">Main</main>
    <footer id="footer">Footer</footer>
    <footer id="copyright">Copyright</footer>
</body>
</html>

There are two absolute positioned elements:

A whole ul inside the menu nav element
An li inside a ul inside the menu nav element

The first element is displayed normally, over the main region, but the li element is under the main region.

My questions:

Why is it happening (second - li element)?
How can I position it over the main region?

Update

Upon closer inspection, I found that it has something to do with overflow-y: scroll. If I remove it, everything works as expected. But why does it happen?

CodePudding user response：

overflow-y:hidden is incompatible with overflow-x:visible (the default) so it's converted to overflow-x:auto.

The position:relative ul is thus contained within the menu scroll container, and provides the containing block for the position:absolute li. That li overflows the ul, which has zero height and width, but is still considered part of the rendering of the ul. so the overflow is contained within the menu scroll container.

The position:absolute ul's containing block is the initial containing block and is positioned relative to that. It does not overflow anything and is not contained within the menu scroll container, so is painted on top of the main area.