CSS 定位——绝对混乱

Question

我正在尝试使用 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 属性的值是 absolute 时，这意味着元素相对于最近的定位祖先（父、祖父等）定位，而元素将从中删除文档并准确放置在您告诉它的位置。

因此，我根据我的代码将其可视化：

还有这个，对于里面的元素：

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

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

很抱歉，这篇文章很长，但我希望它已经清楚地说明了我的困惑根源在哪里。在此先感谢您，如果您认为这个问题仍然没有必要，我可以删除它......在我清除我的疑虑之后:(

附：我之所以这样做是因为我也想涉足响应式网页设计

Answer 1

我可以在这里建议flexbox 方法吗？只需几个 CSS 规则，我们就可以实现您想要的，具有更大的启动灵活性和可读性。在这种情况下，我们将 body 标签设置为“flex”它的内容垂直**，然后添加横轴居中，所以我们得到水平和垂直居中，然后对表单元素做同样的事情。

**我们选择flex-direction:column，因为这允许我们垂直居中高度不确定或未知的元素。

body {
    display:flex;
    /*specify main axis*/
    flex-direction:column;
    /*center vertically on main axis (up and down)*/
    justify-content:center;
    /*center horizontally (cross-axis, left and right)*/
    align-items:center;
    height:100vh;
}
img, form {
    margin:5px;
    padding:5px;
}
#logo {
    width:40%;
    border:1px solid red;
}
form.login {  
    border:1px solid green;
    width:40%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
form.login p {
    width:80%; 
}
form.login input[type=password] {
    width:80%;
}

<!-- 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="Hi Mom!!" autofocus autocomplete="off"/>

</form>

Answer 2

您的表单没有指定大小。如下所示更改其样式，您的表单将与图表匹配。

form.login {
    position: absolute;
    max-width: 30%;
    max-height: 40%;
    top: 23%;
    left: 30%;
    right: 30%;
    bottom: 25%;
}

编辑：但我宁愿使用其他方法来居中登录表单。赞这个CSS : center form in page horizontally and vertically

/* -- Background image -- */

body {
    background-image: url(https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg);
    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 {
    border: 1px solid black;
    position: absolute;
    max-width: 30%;
    max-height: 40%;
    top: 23%;
    left: 30%;
    right: 30%;
    bottom: 25%;
}

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%;
}

<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>