CSS 定位——绝对的混乱

注意：在您否决这个问题/将其标记为重复之前，让我先说我很清楚有很多类似的问题已经在 stackoverflow 上得到了回答。因此，我为我的问题创建了一些图表，以便我可以进一步添加到这个主题（通过提供更大的清晰度），尽管早些时候进行了一些积极的谷歌搜索，但我确实仍然需要一些帮助......

所以，我正在尝试使用 HTML 和 CSS 创建一个简单的登录页面：

HTML 头：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Defines a title in the browser toolbar -->
<title>CueClick, You Click.</title>

<!-- Imports the css for the homepage -->
<link rel="stylesheet" href="styles.css">

HTML 正文：

<!-- Logo -->
<img id="logo" src="cueclick.png" alt="cueclick logo">

<!-- Login element -->
<form class="login">
    <p>Enter <i>your</i> secret key</p>
    <br>
    <input type="password" placeholder="ilovecueclick" autofocus autocomplete="off"/>
</form>

以及相应的 CSS：

/* -- Background image -- */
body {
    background-image: url(clouds.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.75;
    filter:alpha(opacity=75);
}

/* -- Logo style -- */
#logo {
    position: absolute;
    max-width: 30%;
    height: auto;
    top: 25%;
    left: 35%;
}

/* -- Form styles -- */
form.login {
    position: absolute;
    max-width: 30%;
    max-height: 40%;
    top: 42%;
    left: 35%;
}

form.login p {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    font-size: 2.5vw;
    position: absolute;
    left: 10%;
    top: 10%;
    max-width: 80%;
}

form.login input[type=password] {
    position: absolute;
    top: 60%;
    max-width: 100%;
    width: 80%;
}

作为 Web 开发的新手，我了解到当 position 属性具有绝对值时，这意味着元素相对于最近的定位祖先（父级、祖父级等）定位，元素从文档中删除并正好放在你告诉它去的地方。

因此，我根据我的代码对此进行了可视化：

而这个，对于里面的元素：

我的印象是 logo 和 .login 类将相对于文档正文定位，表单中的段落以及输入框将相对于 .login 类本身定位。不幸的是，这就是现实：

为什么会这样？这里的概念错误是什么？还有什么建议吗？

Sorry for the long post, but I hope it has made it really clear where my source of confusion lies. Thanks in advance, and if you think that this question is still really unnecessary I am fine with deleting it...after I clear my doubts :(

P.S. I am doing it in % because I want to venture into responsive web design as well