个人中心
gpt4 book ai didi

html - 如何使 bar 正确固定？

转载 作者：行者123 更新时间：2023-11-28 10:41:41 24 4
gpt4 key购买 nike

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

第二个:我调整了用户名和密码框的大小，并将它们变大了，问题是框变大了，但我在其中写的字仍然是常规大小。

我的代码:

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;
           }

最佳答案

对于堆叠顺序(例如 photoshop 中的图层)- 如果您不设置 z-index，则最后呈现到页面的内容将是绝对定位时的前一个元素。看看 z-index css property - 所以说集合 

#bar{
  z-index:5;
}

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

虽然我不确定您是否理解 div 和表单元素的工作原理，但您需要仔细查看您的 HTML； div 允许您包含多个元素(它们是容器)，如果您希望合理地使用它们，则需要将所有表单元素嵌套在一个表单标签中。另请查看固定、绝对和相对定位之间的区别 here .

关于html - 如何使 bar 正确固定？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23110079/

24 4 0
文章推荐： swift - 计算当前时间和旧时间 Swift 之间的时间
文章推荐： ios - 如何提取 DynamoDB 表中的第一行？
文章推荐： javascript - 从响应式菜单中提取移动菜单
文章推荐： html - Firefox 中不显示旋转木马的图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com