Question

我有问题.. 首先：我做了一个登录页面，并将登录选项卡固定在顶部，并使注册窗口绝对，然后当我向下滚动注册窗口越过登录栏

第二个：我调整了用户名和密码框的大小，并使它们变得更大，问题是框变得更大但我写在其中的单词仍然是常规尺寸。

我的代码：

html：

<!doctype html>
<html>
<head>
<title>Taabe3</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<script type="text/javascript" src="script.js"></script>

</head>

<body background="img/background.jpg" id="background">
<img src="img/bar.png" id="bar">
<div class="login_form">
<div  id="username">

<form>
<p><span>UserName:</span>
<input name="UserName" type="text" size="0" id="box1" >
</p>
</form>
</div>


<div class="login_form" id="pass"><form>
<p><span>Password:</span>
<input  name="lastname" type="password" id="box2">
</p>
</form>
</div>
<a href="" id="link" >
<div id="login"  >Login</div>
</a>

<div id="sbackground">
</div>

<div id="sign up">

<form>
<p><span id="text6"><strong>UserName:</strong></span>
<input name="UserName" type="text" size="0" id="box6" >
</p>
</form>


<form>
<p><span id="text5"><strong>Email:</strong></span>
<input name="Email" type="text" size="0" id="box5" >
</p>
</form>

<form>
<p><span id="text4"><strong>Password:</strong></span>
<input name="Password" type="password" size="0" id="box4" >
</p>
</form>

<form>
<p ><span id="text3" ><strong>Confirm Password:</strong></span>
<input name="Password" type="Password" size="0" id="box3" >
</p>
</form>

<a href="" id="link" >
<div id="signup"  ><p id="stext">Sign Up<p></div>
</a>


<img src="img/Untitled-1.png" width="640" height="35"  id="line"/> </div>

<img src="img/login_with_facebook.png" width="602" height="60" id="facebook"/>
</body>
</html>

的CSS：

    #pass{
position: fixed;
top: 22px;
left: 963px;
right: 10%;
width: 280px;
height: 62px;
border-radius: 20px;
font-family: corbel;
    }

    #username{
position:fixed;
top: 23px;
left: 709px;
right: 10%;
width: 280px;
height: 61px;
font-family: corbel;
border:medium;
border-color:black;

    }

    #background{
height: 1000px;
    }

    #button{
position: fixed;
left: 1170px;
top: 40px;
background-color: #FFFFFF;
    font-family:corbel;
}

    #loginform{position:fixed;left:100px}

    #bar{
position:fixed;
    top:0;
    left:0;
    background-color:black;
    border:solid 2px;
    border-color:#09F
    }

    #login{
    position: fixed;
    top: 38px;
    left: 1202px;
    width: 63px;
    height: 23px;
    background-color: #2799b6;
    text-align: center;
    font-family: corbel;
    border-radius:20px;
    color:#FFF;
    font-size:15px;
    opacity:1;
    -moz-transition:    opacity .5s;
    -o-transition:      opacity .5s;
    -webkit-transition: opacity .5s;
    transition:         opacity .5s;

    }

    #link{text-decoration:none}

    #login:hover{
    opacity:0.7;
   -moz-transition:    opacity .5s;
   -o-transition:      opacity .5s;
   -webkit-transition: opacity .5s;
   transition:         opacity .5s;
   }

   #box1{border: 2px solid #bfbfbf;
   border-radius:20px;
    height:20px;
    }

   #box2{border: 2px solid #bfbfbf;
   border-radius:20px;
    height:20px;

    }

   #box1:focus {
   border: 2px solid #5ad3de;
outline:none;
    }

   #box2:focus {
border: 2px solid #5ad3de;
outline:none;

    }

    #sbackground{background-color:white;
    height:550px;
    width:350px;
    position:absolute;
    top:200px;
    right:100px;
    border-radius:20px;
    opacity:0.7;

    }

    #box3{border: 2px solid #bfbfbf;
    border-radius:20px;
    height:20px;
    position:absolute;
    top:508px;
    right:150px;
    height:30px;
    width:250px
    }
    #text3{position:absolute;
    top:478px;
    right:160px;
    font-family:corbel;
    color: #2799B6;
    font-size:20px
            }

            #box3:focus {
border: 2px solid #5ad3de;
outline:none;}

            #box4{border: 2px solid #bfbfbf;
    border-radius:20px;
    height:20px;
    position:absolute;
    top:429px;
    right:150px;
    height:30px;
    width:250px
    }
    #box4:focus {
border: 2px solid #5ad3de;
outline:none;}
    #text4{position:absolute;
    top:399px;
    right:160px;
    font-family:corbel;
    color: #2799B6;
    font-size:20px
             }


             #box5{border: 2px solid #bfbfbf;
    border-radius:20px;
    height:20px;
    position:absolute;
    top:350px;
    right:150px;
    height:30px;
    width:250px

    }
    #box5:focus {
              border: 2px solid #5ad3de;
outline:none;}
    #text5{position:absolute;
    top:320px;
    right:160px;
    font-family:corbel;
    color: #2799B6;
    font-size:20px
            }


            #box6{border: 2px solid #bfbfbf;
    border-radius:20px;
    height:20px;
    position:absolute;
    top:270px;
    right:150px;
    height:30px;
    width:250px
    }
    #box6:focus {
border: 2px solid #5ad3de;
outline:none;}
          #text6{position:absolute;
    top:240px;
    right:160px;
    font-family:corbel;
    color: #2799B6;
    font-size:20px
            }

            #signup{
             position: absolute;
            top: 580px;
           right: 230px;
           width: 110px;
            height: 40px;
             background-color: #2799b6;
            text-align: center;
              font-family: corbel;
                  border-radius:20px;
               color:#FFF;
           font-size:19px;
            opacity:1;
            -moz-transition:    opacity .5s;
            -o-transition:      opacity .5s;
               -webkit-transition: opacity .5s;
               transition:         opacity .5s;

                }
                #stext{position:absolute;top:-10px;
                 left: 26px;}

                  #link{text-decoration:none}

                 #signup:hover{
                opacity:0.7;
                -moz-transition:    opacity .5s;
                -o-transition:      opacity .5s;
                    -webkit-transition: opacity .5s;
                    transition:         opacity .5s;
                       }


                  #line{position: absolute;
               top: 640px;
                right: 212px;
                width:150px}

                  #facebook{
             position: absolute;
         top: 665px;
          right: 19px;
opacity: 1;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s;
width: 506px;
height: 74px;

        }
#facebook:hover{
         opacity:0.7;
      -moz-transition:    opacity .5s;
     -o-transition:      opacity .5s;
     -webkit-transition: opacity .5s;
      transition:         opacity .5s;
           }

Answer 1

用于堆叠顺序（例如，在photoshop中的图层） - 如果您没有设置z-index，那么最后一次呈现的内容将是绝对定位时的前一个元素。看看z-index css property - 所以说集

#bar{
  z-index:5;
}

#login-form{
  z-index:4;
}

你需要努力查看你的HTML，因为我不确定你是否理解div和form元素是如何工作的; div允许您包含多个元素（它们是容器），如果您希望对它们进行任何合理的使用，则需要将所有表单元素嵌套在一个表单标记中。另请查看固定，绝对和相对定位here之间的差异。

如何正确固定杆？

1 个答案: