ログイン欄に画像が重複しています - 反応しません

Question

私は自分のヘッダに大きな画像があり、コーナーにログイン欄があります。私は写真上でposition：relativeを使用し、ログインフィールド上でposition：absoluteを使用して、手動でコーナーに置く（CSSの右上と右）。問題は、 "右"属性がウィンドウサイズに対応しているように見えるので、ブラウザを絞り込むと、ブラウザの側から固定された距離を保ち、写真の角から押し出します。

第二の画像は、それがシフトしますどのように最初のショー、のように見えることになっているものを示しています。

ここに私の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

#loginposition:absolute他のdivを基準にして他のdivはその親でなければなりません。あなたのHTML構造の#logoと#loginは兄弟です。したがって#loginとposition:absoluteは、#logoに相対的にとどまることはありません。代わりに#headerにposition:relativeを使用してください。

と、ウィンドウ幅に相対距離を使用したい場合、たとえば{ right:5vw }の値が動的ウィンドウで変更されます#loginは常に、vwを使用し、#header

の右端に滞在するので{ right:0}を追加幅（ビューポートの幅）

dont; tの前に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>

Answer 2

私はあなたの代わりに#logoの、position: relative;から#headerのためにあなたのスタイルを設定する必要があると思います。

Answer 3

は、ログインボックスは常に変動ログインID

#login { 
    position:absolute; 
    top:317px; 
    right:0px; 
}