CSS Positioning -- Absolute Confusion

Question

I am trying to creating a simple login page with HTML and CSS:

HTML head:

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

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

And the corresponding 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%;
}

Being rather new to web development, I have learnt that when the position property has the value absolute, it means that the element is positioned relative to the nearest positioned ancestor (parent, grandparent etc.), with the element being removed from the document and placed exactly where you tell it to go.

Consequently, I visualised this based on my code:

And this, for the elements inside the :

It is my impression that the logo and .login class would be positioned relative to the document body, and that the paragraph in the form, along with the input box would be positioned relative to the .login class itself. Unfortunately, this is the reality:

Why is this so? What is the conceptual error here? Any other advice?

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

Answer 1

Your form doesn't have specified size. Change it's style as shown below and your form will match the diagrams.

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

Edit: but I'd rather use other method to center login form. Like this 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>

Answer 2

Might I suggest a flexbox approach here? With only a few CSS rules, we can achieve what you want, with greater flexibility and readability to boot. In this situation, we set the body tag to "flex" it's contents vertically**, and then add cross-axis centering as well, so we get both horizontal and vertical centering, and then do the same thing with the form element.

**we choose flex-direction:column because this allows us to vertically center elements whose height is uncertain or unknown.

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>