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

我想在窗口的右侧放置一个注册表单，我希望它可以粘在底部但不能到达顶部，看起来我已成功完成，一个问题，根据屏幕分辨率，表单会改变它的位置，例如我的第二台显示器是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 –

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

回答

相关问题