根據窗口大小更改位置的元素

我想在窗口的右側放置一個註冊表單，我希望它可以粘在底部但不能到達頂部，看起來我已成功完成，一個問題，根據屏幕分辨率，表單會改變它的位置，例如我的第二臺顯示器是1920x，我沒有看到按鈕，我從電子郵件中看到它，我怎麼能讓它保持相同的位置在所有決議？根據窗口大小更改位置的元素

我嘗試了谷歌搜索，但我沒有找到工作的東西，對不起，如果我是過於noob，但這已經給我一段時間的問題..我想找到一次的好方法，使它和使用在未來的太...

這是它應該如何看

這是怎麼出錯在其它顯示器：

代碼：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/registerpage.css"> 
<link href='//fonts.googleapis.com/css?family=Bangers' rel='stylesheet'> 

<title>Register Page | Home</title> 
</head> 

<body> 
<div class="background-image"></div> 
<div class="content"> 

<div id="main"> 
    <form id="loginform" action="/action_page.php"> 
     <label class="usernam" for="username">Username</label> 
     <input type="text" id="username" name="username" placeholder="Insert your username..."> 

     <label class="usernam" for="pass">Password</label> 
     <input type="password" class="pass" name="pass" placeholder="Insert your password..."> 

     <label class="usernam" for="pass2">Repeat Password</label> 
     <input type="password" class="pass" name="pass2" placeholder="Insert your password again"> 

     <label class="usernam" for="useremail">E-Mail</label> 
     <input type="email" class="pass" name="userem" placeholder="Insert your email"> 

     <input type="submit" value="Register"> 
    </form> 
</div> 

<!-- <img id="userimg" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/24/man-icon.png"/> --> 
<!-- <img id="passimg" src="http://icons.iconarchive.com/icons/webiconset/application/24/Register-icon.png"/> --> 

</div> 
</body> 

</html>

CSS代碼：

html,body { 
    overflow: auto; 
} 

.background-image 
{ 
    background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2015/07/beautiful-light-city-wallpaper-hd-1080p.jpg"); 
    position: fixed; 
    background-size: cover; 
    left: 0; 
    right: 0; 
    z-index: 1; 

    display: block; 
    width: 100%; 
    height: 100%; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(3px); 

} 

.content { 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: 9999; 
    margin-left: 20px; 
    margin-right: 20px; 
} 

#main { 
    line-height: 400px; 
    position: fixed; 
    text-align:center; 
    border: 3px solid #f2f2f2; 
    border-radius: 2px; 
    left: 600px; 
    width: 250px; 
    height: 100%; 

    margin-top: 132px; 
    margin-left: 399px; 
    margin-right: 399px; 
    background-color: #f2f2f2; 
    border-radius: 25px; 
    padding: 10px; 
    -webkit-box-shadow: 12px 10px 35px -11px rgba(0,0,0,0.75); 
    -moz-box-shadow: 12px 10px 35px -11px rgba(0,0,0,0.75); 
    box-shadow: 12px 10px 35px -11px rgba(0,0,0,0.75); 
} 

#loginform { 
    display: inline-block; 
    line-height: 5px; 
    top: 10%; 
    height: auto; 
} 

#loginform #username, .pass { 
    width: 100%; 
    padding: 12px 45px; 
    margin: 30px 0; 
    display: inline-block; 
    border: 2px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
} 

.usernam { 
    font-family: 'Bangers'; 
    font-size: 30px; 
} 

/*#userimg { 
    position: absolute; 
    left: 425px; 
    bottom: -278px; 
} 

#passimg { 
    position: absolute; 
    left: 425px; 
    bottom: -400px; 
}*/ 


input[type=submit] { 
    width: 100%; 
    background-color: #4CAF50; 
    color: white; 
    padding: 14px 20px; 
    margin: 8px 0; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
} 

input[type=submit]:hover { 
    background-color: #45a049; 
} 

/*#copyright { 
    position: absolute; 
    bottom: -555px; 
    left: 580px; 
}*/

這是給我的頭痛，這是它的外觀我的顯示器上：

，這是它的外觀，從1920×1080

我試過使用px和％結果是一樣的兩個：@請...我不明白..

好吧，我解決了這個問題，但現在我添加的圖標並不能保持其位置，它應該在所有屏幕上顯示。

它的外觀上更大的分辨率..

股利代碼：

<div id="main"> 
    <form id="loginform" action="/action_page.php"> 
     <label class="usernam" for="username">Username</label> 
     <input type="text" id="username" name="username" placeholder="Insert your username..."> 
     <img id="userimg" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/24/man-icon.png"/> 

     <label class="usernam" for="pass">Password</label> 
     <input type="password" class="pass" name="pass" placeholder="Insert your password..."> 
     <img id="passimg" src="http://icons.iconarchive.com/icons/webiconset/application/24/Register-icon.png"/> 

     <label class="usernam" for="pass2">Repeat Password</label> 
     <input type="password" class="pass" name="pass2" placeholder="Insert your password again"> 
     <img id="pass2img" src="http://icons.iconarchive.com/icons/webiconset/application/24/Register-icon.png"/> 

     <label class="usernam" for="useremail">E-Mail</label> 
     <input type="email" class="pass" name="userem" placeholder="Insert your email"> 
     <img id="emimg" src="http://icons.iconarchive.com/icons/dario-arnaez/genesis-3G/24/Emails-Folder-icon.png"/> 

     <input type="submit" value="Register"> 
    </form> 
</div>

CSS：

#userimg { 
    position: absolute; 
    top: 9%; 
    right: 84%; 
} 

#passimg { 
    position: absolute; 
    top: 26%; 
    right: 84%; 
} 

#pass2img { 
    position: absolute; 
    top: 43%; 
    right: 84%; 
} 

#emimg { 
    position: absolute; 
    top: 60%; 
    right: 84%; 
}

來源

2017-03-17 Andrei Civili

你唯一需要的定位是：

#main { 
    position: fixed; 
    right: 0; 
    bottom: 0; 
}

（在這裏爲你願意，你可以編輯的權值。）

請刪除類似性質：

#main { 
    left: 600px; 
    margin-top: 132px; 
    margin-left: 399px; 
    margin-right: 399px; 
}

這是「神奇」的數字。修復您的表格持有人的高度，它會完成。

來源

2017-03-17 15:26:19

謝謝，你能告訴我爲什麼正確而不是離開，爲什麼那些被稱爲「幻數」？：D –

魔術數字，因爲它們是隨機設置的，不是整數。這些值在某些屏幕上很好，但在其他分辨率下它們不適合。這裏我們使用正確的定位，因爲元素更接近右邊框。您也可以使用左邊的值，但這些值應該更大並且難以計算。 –

現在我遇到了一些圖標問題，編輯了我上面的第一篇文章：s @NadezhdaSerafimova –

根據窗口大小更改位置的元素

回答

相關問題