考虑这个代码片段。我已经将.sideup div相对于主体进行了绝对定位。
现在我知道，绝对定位的元素会被从正常的内容流中切出，并被视为不存在于父元素中。
但这里的.sideup div扩展了父元素（body）的高度，即使max-height被设置为100vh。
我基本上想做的是让信息从下面滑到屏幕上，但是这段代码让用户在向下滚动时可见，这是我不希望发生的。
为什么会发生这种情况，我如何解决这个问题？
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
position: relative;
background-color: #34495e;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
/* display: flex;
flex-direction: column;
align-items: center; */
height: 100vh;
max-height: 100vh;
font-size: 110%;
}
/************************************/
/* SLIDER */
/************************************/
.slideup {
/* display: none; */
position: absolute;
bottom: -4rem;
font-size: 1rem;
letter-spacing: 1.15px;
background-color: rgba(0, 0, 0, 0.3);
padding: .8rem .8rem 2rem;
border-radius: 10px;
transition: .5s bottom ease;
}
.slideup.show {
bottom: -1rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hangman</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- -->
<div class="slideup show">
<div class="notification">You have already entered this letter!</div>
</div>
<script src="script.js"></script>
</body>
</html>正如 @TemaniAfif 所指出的，这个问题可以通过添加一个简单的 overflow: hidden 属性到body元素。
绝对定位的div .sideup不会扩展父元素的高度，而是溢出。这种行为也可以通过给body添加边框来验证，也可以通过给.sideup div添加right或bottom属性来验证。