我创建了两个按钮，我想将它们放在我的输入登录框下方。我希望它具有响应性，所以我使用了绝对值，但是当我移动它们时，按钮突然重叠了!任何解决方案？这是我的索引和样式表:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0px;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
</form>
<div>
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</header>
</body>
</html>最佳答案
试试这个...
position:absolute 和响应式设计没有关系。
由于您打算使用绝对值来执行此操作，因此只需将按钮 div 放入表单中即可。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn{
margin-top:30px;
font-size: 14px !important;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
<div>
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</form>
</header>
</body>
</html>编辑:这是为了您的评论。我还建议您使用媒体查询进行响应式布局。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn {
margin-top: 30px;
font-size: 14px !important;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}
.btns {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
top: 300px;
left: 15%;
right: 0px;
height: auto;
font-size: 14pt;
margin: 0px auto;
padding: 15px;
}<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
</form>
<div class="btns">
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</header>
</body>
</html>关于html - 定位时两个按钮重叠？ (HTML/CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40298232/