html - 将图片与登录字段重叠 - 不响应

Question

我的标题有一张大图片，我想在 Angular 落里有一个登录字段。我在照片上使用了position:relative，然后在登录字段上使用了position:absolute，手动将其放在 Angular 落(CSS 中的顶部和右侧)。问题是“正确”属性似乎与窗口大小相对应，因此当我缩小浏览器时，它与浏览器侧面保持固定距离，将其推出照片的 Angular 落。

第二张图片显示了它应该是什么样子，第一张图片显示了它是如何移动的。

这是我的 HTML 代码:

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

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

Answer 1

要使 #login 保持相对于另一个 div 的 position:absolute 位置，该另一个 div 必须是其父级。在 HTML 结构中，#logo 和 #login 是 sibling 。因此带有 position:absolute 的 #login 永远不会保持相对于 #logo 的位置。而是在 #header 上使用 position:relative 。

并添加{ right:0}，以便#login始终位于#header的右边缘

如果您想使用相对于窗口宽度的距离，请使用 vw ，例如 { right:5vw } 的值将随着窗口宽度动态变化(视口(viewport)宽度)

不要忘记在 header 之前写入 # 因为正如我在您的 css 中看到的，# 不存在。

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