Question

我正在尝试为3种输入形式设置下边距。

但是我不确定为什么其他元素会堆叠在一起。

我已经将所有3个<div class="group">都设置为相对，并且我希望其中设置为position:absolute;的内容绝对显示在各自的容器中。

Here ，.group显示正常：

.group {
    position: relative;
    top: 60px;
    left: 0%;
    margin-bottom: 30px;
    color: white;
}

在下面，不起作用：

body {
  background-color: Royalblue; /*#f0f0f0;*/
  margin: 0px;
}

form {
  position: relative;  
  top: 50px;
  left: 37%;
  width: 280px;
  height: 300px;
  border: 1px solid #B0C4DE;
  background: royalblue;   
  border-radius: 0px;
}

.group {
    position: relative;
    top: 60px;
    left: 12%;
    margin-bottom: 30px;
}

/* Main EFFECT ================================ */


input {
  position: absolute;
  top: 0px;
  left: 0px;   
  font-family: monospace; /*'Montserrat', sans-serif;*/
  border: 0; 
  border-bottom: 1.5px solid beige;
  background: transparent;
  font-size: 15px;                     /*BORDER yes/no*/
  height: 25px; 
  width: 200px;
  outline: 0; 
  z-index: 1; 
  color: black;
}

span {
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: monospace; /*'Montserrat', sans-serif;*/ 
  font-size: 17px;
  z-index: 1; 
  color: white; 
  transition: top .5s ease, font-size .5s ease; 
}


label::after {
  content: '';
  position: absolute;
  top: 6px;            /* ::after position */
  left: 0px;
  width: 200px; 
  height: 23px;
  border-radius: 2px;
  background: beige; /*#a86bf;*/
  transition: transform .7s;   
  transform: scale3d(1, 0.08, 1);
  transform-origin: bottom;
}

input:focus + label::after,
input:valid + label::after {
  top: 6px;  
  transform: scale3d(1, 1.3, 1);
  transition-timing-function: linear;
            /* ::after position */
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
 /* padding-bottom: 15px;*/
}

<body>
 
 <div class="content">
      
     <!--  <p class="head">Register</p>
 -->
        <form>

           <!--  <div class="content">  -->
     
                <!--   <div class="email">
                    <input type="text" id="email" required /> input field
                    <label for="email"><span>Email</span></label>
                  </div> -->

                  <div class="group">
                    <input type="text" id="user" required />  
                    <label for="user"><span>Username</span></label>
                  </div>
 
                  <div class="group">
                    <input type="text" id="pass" required /> 
                    <label for="pass"><span>Password</span></label>
                  </div>

                  <div class="group">
                    <input type="text" id="c-pass" required />  
                    <label for="c-pass"><span>Confirm Password</span></label>
                  </div>    
 
            

        </form>

      </div>  

</body>

Answer 1

您尝试这样做吗？

body {
  background-color: Royalblue; /*#f0f0f0;*/
  margin: 0px;
}

form {
  position: relative;  
  top: 50px;
  left: 37%;
  width: 280px;
  height: 300px;
  border: 1px solid #B0C4DE;
  background: royalblue;   
  border-radius: 0px;
}

.group {
    position: relative; 
    left: 12%;
}

.grp1{
   top: 60px;  
}

.grp2{
   top: 110px;   
}

.grp3{
   top: 160px;   
}

.grp4{
   top: 210px;   
}

/* Main EFFECT ================================ */


input {
  position: absolute;
  top: 0px;
  left: 0px;   
  font-family: monospace; /*'Montserrat', sans-serif;*/
  border: 0; 
  border-bottom: 1.5px solid beige;
  background: transparent;
  font-size: 15px;                     /*BORDER yes/no*/
  height: 25px; 
  width: 200px;
  outline: 0; 
  z-index: 1; 
  color: black;
}

span {
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: monospace; /*'Montserrat', sans-serif;*/ 
  font-size: 17px;
  z-index: 1; 
  color: white; 
  transition: to .5s ease, font-size .5s ease;
  -webkit-transition: top .5s ease, font-size .5s ease; 
  -moz-transition: top .5s ease, font-size .5s ease; 
  -ms-transition: top .5s ease, font-size .5s ease; 
}


label::after {
  content: '';
  position: absolute;
  top: 6px;            /* ::after position */
  left: 0px;
  width: 200px; 
  height: 23px;
  border-radius: 2px;
  background: beige; /*#a86bf;*/
  transition: transform .7s;
  -webkit-transition: transform .7s;
  -moz-transition: transform .7s;
  -ms-transition: transform .7s;   
  transform: scale3d(1, 0.08, 1);
  -webkit-transform: scale3d(1, 0.08, 1);
  -ms-transform: scale3d(1, 0.08, 1);
  -moz-transform: scale3d(1, 0.08, 1);
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  -moz-transform-origin: bottom;
  -ms-transform-origin: bottom;
}

input:focus + label::after,
input:valid + label::after {
  top: 6px;  
  transform: scale3d(1, 1.3, 1);
  -webkit-transform: scale3d(1, 1.3, 1);
  -moz-transform: scale3d(1, 1.3, 1);
  -ms-transform: scale3d(1, 1.3, 1);      
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  /* ::after position */
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
 /* padding-bottom: 15px;*/
}

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <title>Test</title>
</head>
<body>
    <form>          
          <div class="group grp1">
            <input type="text" id="email" required /> <!--input field-->
            <label for="email"><span>Email</span></label>
          </div>
 
          <div class="group grp2">
            <input type="text" id="user" required />  
            <label for="user"><span>Username</span></label>
          </div>

          <div class="group grp3">
            <input type="text" id="pass" required /> 
            <label for="pass"><span>Password</span></label>
          </div>
 
          <div class="group grp4">
            <input type="text" id="c-pass" required />  
            <label for="c-pass"><span>Confirm Password</span></label>
          </div> 
        </form>
</body>
</html>

其他元素堆叠在一起，我已经将它们的容器设置为position：relative;

1 个答案: