Nicholas Hassan Nicholas Hassan - 1 month ago 7
CSS Question

Overlap a picture with login field - not responsive

I have a big picture for my header and I want to have a login field in the corner. I used position: relative on the photo, and then position: absolute on the login field to manually put it in the corner (top and right in CSS). The problem is the "right" attribute seems to correspond to window size, so as I narrow my browser, it stays a fixed distance from the side of the browser, pushing it out of the corner of the photo.

enter image description here

The second image shows what it's supposed to look like, the first shows how it gets shifted.

Here's my HTML code:

<div id="header">
<div id="logo">
<picture>
<source media="(min-width: 650px)" srcset="Images/logolow.jpeg, Images/logo.jpg 2x">
<source media="(min-width: 465px)" srcset="Images/logolowvert.jpeg, Images/logovert.jpeg 2x">
<img src="Images/logolow.jpeg" srcset="Images/logo.jpg 2x" alt="Prof Pro Logo">
</picture>
</div>
<div id="login">
<fieldset>
<Legend>Login</Legend>
Username <input type="text" name="username"/>
Password <input type="password" name="password"/>
<input type="submit" value="Login"><a href="Assignment 1 - Register.html">
<div id="register">
Not a member? Click here to register!</a>
</div>
</fieldset>
</div>
</div>


And CSS:

#header {
width: 1100px;
}

#logo {
position:relative;
height: 450px;
width: 1100px;
}

#logo img {
height: 100%;
width: 100%;
}

#login {
top: 317px;
right: 166px;
margin-top: 0px;
width: 220px;
color: white;
position: absolute;
}

Answer

for the #login to stay with position:absolute relative to another div, that other div must be his parent . in your HTML structure #logo and #login are siblings. so #login with position:absolute, will never stay relative to #logo. instead use position:relative on #header .

and add { right:0} so the #login will always stay on the right edge of #header

if you want to use distances relative to the window width, use vw , for example the value of { right:5vw } will dynamically change with the window width ( viewport width )

dont;t forget to write # before header because as i can see in your css , the # is not present.

#header {
    width: 1100px;
    position:relative;
}

#logo {
    
    height: 450px;
    width: 1100px;
} 

#logo img {
    height: 100%;
    width: 100%;
}

#login {
    bottom: 0px;
    right: 0px;
    margin-top: 0px;
    width: 220px;
    color: white;
    position: absolute;
}
<div id="header">
            <div id="logo">
                <picture>
                    <source media="(min-width: 650px)" srcset="Images/logolow.jpeg, Images/logo.jpg 2x">
                    <source media="(min-width: 465px)" srcset="Images/logolowvert.jpeg, Images/logovert.jpeg 2x">
                    <img src="Images/logolow.jpeg" srcset="Images/logo.jpg 2x" alt="Prof Pro Logo">
                </picture>
            </div>  
            <div id="login">
                    <fieldset>
                    <Legend>Login</Legend>
                    Username <input type="text" name="username"/>
                    Password <input type="password" name="password"/>
                    <input type="submit" value="Login">
                    <a href="Assignment 1 - Register.html">
                    <div id="register">
                        Not a member? Click here to register!
                    </div>
                    </a>
                    </fieldset>     
            </div>
        </div>