我有以下页面：
<!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 class="abs">
<li>test</li>
</ul>
<ul class="rel bott">
<li class="abs">test</li>
</ul>
</nav>
<main id="main">Main</main>
<footer id="footer">Footer</footer>
<footer id="copyright">Copyright</footer>
</body>
</html>有两个绝对定位的元素：
- 菜单导航元素内的整个ul
- 菜单导航元素中的li和ul
第一个元素正常显示在主区域上方，但li元素在主区域下方。
我的问题：
- 为什么会发生(第二个-li元素(
- 如何将其定位在主要区域上
更新
仔细一看，我发现它与溢出有关-y：滚动。如果我删除它，一切都会如预期的那样工作。但为什么会这样呢？
overflow-y:hidden与overflow-x:visible(默认值(不兼容，因此转换为overflow-x:auto。
因此，position:relativeul包含在菜单滚动容器中，并为position:absoluteli提供包含块。该li溢出高度和宽度为零的ul，但仍被视为ul渲染的一部分。因此溢出被包含在菜单滚动容器内。
position:absoluteul的包含块是初始包含块，并且相对于初始包含块定位。它不会溢出任何内容，也不包含在菜单滚动容器中，因此绘制在主区域的顶部。