Question

注意：在你向我们提出这个问题之前/将其标记为重复之前，我首先要说的是，我很清楚在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类本身定位。不幸的是，这是现实：

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

对于这篇长篇文章感到抱歉，但我希望它能清楚地表明我的困惑源于何处。在此先感谢，如果您认为这个问题仍然是不必要的，我可以删除它...在我明确疑虑之后：（

P.S。我这样做是因为我想进入响应式网页设计

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我可以建议采用flexbox方法吗？只需几条CSS规则，我们就可以实现您的目标，具有更高的灵活性和可读性。在这种情况下，我们将body标签设置为＆＃34; flex＆＃34;它的内容垂直**，然后添加横轴居中，所以我们得到水平和垂直居中，然后用表单元素做同样的事情。

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS定位 - 绝对混乱

2 个答案: