我的注冊表隨標題移動，但我只想移動注冊表。當我嘗試為“#signup”設定“margin-top: 20px”時，我的表單將標題向下移動。想法為什么會發生什么會發生什么。我不知道要在我的問題中添加什么，所以伙計們，我只會為我的問題添加一些隨機文本來發布它。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar-custom {
width: 100%;
height: auto;
background-color: #2BAE66FF;
display: flex;
justify-content: space-between;
position:fixed;
}
.bookBrand {
padding: 1em 0.5em;
margin: 0;
height: 100%;
vertical-align: middle;
float: right;
font-size: 1.30em;
font-weight: bolder;
line-height: 48px;
}
.navbar-custom ul li {
text-decoration: none;
list-style: none;
float: left;
padding: 0.2em 0.5em;
padding: 10px 30px;
margin: 0 40px;
}
.navbar-custom ul li a {
color: #ffffff;
text-decoration: none;
font-size: 1.2em;
}
.custom-brand {
color: white;
}
.custom-brand:hover {
color: white;
}
.navgation-custom {
}
.navgation-custom li {
-webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.66);
box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.66);
}
.navgation-custom li:hover{
background: #000;
}
@media (max-width: 600px) {
nav .navbar-custom ul li{
display: flex;
flex-wrap: wrap;
}
.navbar-custom ul li {
text-decoration: none;
list-style: none;
float: none;
margin: 0 40px;
}
.left-links {
padding: 2em 0.5em;
margin: 0;
height: 100%;
vertical-align: middle;
float: right;
width: 15%;
}
.right-links {
padding: 2em 0.5em;
margin: 0;
height: 100%;
vertical-align: middle;
float: right;
}
.bookBrand {
padding: 1em 0.5em;
margin: 0;
width: 12%;
height: 100%;
vertical-align: middle;
float: right;
font-size: 1.30em;
font-weight: bolder;
line-height: 48px;
}
}
@media screen and (max-width: 375px) {
.bookBrand {
width: 21%;
}
}
/*Registration form design*/
#signup {
padding: 0px 25px 25px;
background: #fff;
box-shadow: 0px 0px 0px 5px rgba( 255,255,255,0.4 ), 0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
position: static;
margin-top: 20px;
}
#signup .header h3 {
color: #333333;
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
#signup .header p {
color: #8f8f8f;
font-size: 14px;
font-weight: 300;
}
#signup .sep {
height: 1px;
background: #e8e8e8;
width: 406px;
margin: 0px -25px;
}
#signup .inputs {
margin-top: 25px;
}
#signup .inputs label {
color: #8f8f8f;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
margin-bottom: 7px;
display: block;
}
input::-webkit-input-placeholder {
color: #b5b5b5;
}
input:-moz-placeholder {
color: #b5b5b5;
}
#signup .inputs input[type=email], input[type=password],input[type=text], input[type=email] {
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 330px;
margin-bottom: 20px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
clear: both;
}
#signup .inputs input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=email]:focus{
background: #fff;
box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
outline: none;
}
#signup .inputs .checkboxy {
display: block;
position: static;
height: 25px;
margin-top: 10px;
clear: both;
}
#signup .inputs input[type=checkbox] {
float: left;
margin-right: 10px;
margin-top: 3px;
}
main {
margin-top: 30px;
}
#signup .inputs label.terms {
float: left;
font-size: 14px;
font-style: italic;
}
#signup .inputs {
width: 100%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient( top, #b9c5dd 0%, #a4b0cb);
background: -webkit-gradient( linear, left top, left bottom, from(#b9c5dd), to(#a4b0cb));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow: 0px 1px 3px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#signup .inputs .submit:hover {
background: -moz-linear-gradient( top, #a4b0cb 0%, #b9c5dd);
background: -webkit-gradient( linear, left top, left bottom, from(#a4b0cb), to(#b9c5dd));
}
.vertical-center {
width: 100px;
height: 50px;
background-color: #000;
color: #fff;
}
.registerTittle {
text-align: center;
}<head>
<title>BS - Registration</title>
<link href="/css/site.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/img/favicon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar-custom">
<ul class="left-links">
<li><a href="/">Home</a></li>
<li><a href="#">Store</a></li>
</ul>
<ul class="bookBrand">
<li><a href="/">BOOK STORE</a></li>
</ul>
<ul class="right-links">
<li><a href="/Account/Login">Login</a></li>
<li><a href="/Account/Register">Register</a></li>
</ul>
</nav>
</header>
<main>
<link rel="stylesheet" href="/css/Registration.css">
<div class="container">
<form id="signup" method="post" action="/AccountController/Register">
<h3 class="registerTitle">Registration</h3>
<hr>
<div class="form-group">
<div><label for="Email">Email</label></div>
<input placeholder="[email protected]" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="Email adress is bad or empty" id="Email" name="Email" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div>
<label type="text" for="UserName">Username</label>
</div>
<input type="text" placeholder="Some_username" data-val="true" data-val-required="Username is empty or bad" id="UserName" name="UserName" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div><label for="Password">Password</label></div>
<input placeholder="??????" type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password">
<span class="text-danger field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div><label for="ConfirmPassword">Confirm Password</label></div>
<input placeholder="??????" type="password" data-val="true" data-val-equalto="Password and confirmation password not match." data-val-equalto-other="*.Password" data-val-required="The Confirm Password field is required." id="ConfirmPassword" name="ConfirmPassword">
<span class="text-danger field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
</div>
<div class="row">
<div class="col-md"></div>
<div class="col-md"><button type="submit" class="vertical-center">Register</button></div>
<div class="col-md"></div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8NAi7idwsjVPjlBOIkmpwZs1fUqHPBVwKHnmSkjL0b9fA2dlCjBQ4ILxbCnn-k3quiCAtUiE3DUWynzxYuk0Rvo2t_5r8IQJ98_LsVMF63JU5682qAE87YsOMPaxddfBUVTo-3io_for7Zt2xvmc5LM"></form>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
</body>uj5u.com熱心網友回復：
只是讓你頭的位置position:sticky;和它的top:0;。它會解決一切問題。
* {
margin: 0;
padding: 0;
}
header{
position: sticky;
top:0;
width: 100wv;
}
.navbar-custom {
height: auto;
background-color: #2BAE66FF;
display: flex;
justify-content: space-between;
}
.bookBrand {
padding: 1em 0.5em;
margin: 0;
height: 100%;
vertical-align: middle;
float: right;
font-size: 1.30em;
font-weight: bolder;
line-height: 48px;
}
.navbar-custom ul li {
text-decoration: none;
list-style: none;
float: left;
padding: 0.2em 0.5em;
padding: 10px 30px;
margin: 0 40px;
}
.navbar-custom ul li a {
color: #ffffff;
text-decoration: none;
font-size: 1.2em;
}
.custom-brand {
color: white;
}
.custom-brand:hover {
color: white;
}
.navgation-custom {
}
.navgation-custom li {
-webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.66);
box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.66);
}
.navgation-custom li:hover{
background: #000;
}
@media (max-width: 600px) {
nav .navbar-custom ul li{
display: flex;
flex-wrap: wrap;
}
.navbar-custom ul li {
text-decoration: none;
list-style: none;
float: none;
margin: 0 40px;
}
.left-links {
padding: 2em 0.5em;
margin: 0;
height: 100%;
vertical-align: middle;
float: right;
width: 15%;
}
.right-links {
padding: 2em 0.5em;
margin: 0;
height: 100%;
vertical-align: middle;
float: right;
}
.bookBrand {
padding: 1em 0.5em;
margin: 0;
width: 12%;
height: 100%;
vertical-align: middle;
float: right;
font-size: 1.30em;
font-weight: bolder;
line-height: 48px;
}
}
@media screen and (max-width: 375px) {
.bookBrand {
width: 21%;
}
}
/*Registration form design*/
#signup {
padding: 0px 25px 25px;
background: #fff;
box-shadow: 0px 0px 0px 5px rgba( 255,255,255,0.4 ), 0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
position: static;
margin-top: 20px;
}
#signup .header h3 {
color: #333333;
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
#signup .header p {
color: #8f8f8f;
font-size: 14px;
font-weight: 300;
}
#signup .sep {
height: 1px;
background: #e8e8e8;
width: 406px;
margin: 0px -25px;
}
#signup .inputs {
margin-top: 25px;
}
#signup .inputs label {
color: #8f8f8f;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
margin-bottom: 7px;
display: block;
}
input::-webkit-input-placeholder {
color: #b5b5b5;
}
input:-moz-placeholder {
color: #b5b5b5;
}
#signup .inputs input[type=email], input[type=password],input[type=text], input[type=email] {
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 330px;
margin-bottom: 20px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
clear: both;
}
#signup .inputs input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=email]:focus{
background: #fff;
box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
outline: none;
}
#signup .inputs .checkboxy {
display: block;
position: static;
height: 25px;
margin-top: 10px;
clear: both;
}
#signup .inputs input[type=checkbox] {
float: left;
margin-right: 10px;
margin-top: 3px;
}
main {
margin-top: 30px;
}
#signup .inputs label.terms {
float: left;
font-size: 14px;
font-style: italic;
}
#signup .inputs {
width: 100%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient( top, #b9c5dd 0%, #a4b0cb);
background: -webkit-gradient( linear, left top, left bottom, from(#b9c5dd), to(#a4b0cb));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow: 0px 1px 3px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#signup .inputs .submit:hover {
background: -moz-linear-gradient( top, #a4b0cb 0%, #b9c5dd);
background: -webkit-gradient( linear, left top, left bottom, from(#a4b0cb), to(#b9c5dd));
}
.vertical-center {
width: 100px;
height: 50px;
background-color: #000;
color: #fff;
}
.registerTittle {
text-align: center;
}<head>
<title>BS - Registration</title>
<link href="/css/site.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/img/favicon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar-custom">
<ul class="left-links">
<li><a href="/">Home</a></li>
<li><a href="#">Store</a></li>
</ul>
<ul class="bookBrand">
<li><a href="/">BOOK STORE</a></li>
</ul>
<ul class="right-links">
<li><a href="/Account/Login">Login</a></li>
<li><a href="/Account/Register">Register</a></li>
</ul>
</nav>
</header>
<main>
<link rel="stylesheet" href="/css/Registration.css">
<div class="container">
<form id="signup" method="post" action="/AccountController/Register">
<h3 class="registerTitle">Registration</h3>
<hr>
<div class="form-group">
<div><label for="Email">Email</label></div>
<input placeholder="[email protected]" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="Email adress is bad or empty" id="Email" name="Email" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div>
<label type="text" for="UserName">Username</label>
</div>
<input type="text" placeholder="Some_username" data-val="true" data-val-required="Username is empty or bad" id="UserName" name="UserName" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div><label for="Password">Password</label></div>
<input placeholder="??????" type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password">
<span class="text-danger field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div><label for="ConfirmPassword">Confirm Password</label></div>
<input placeholder="??????" type="password" data-val="true" data-val-equalto="Password and confirmation password not match." data-val-equalto-other="*.Password" data-val-required="The Confirm Password field is required." id="ConfirmPassword" name="ConfirmPassword">
<span class="text-danger field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
</div>
<div class="row">
<div class="col-md"></div>
<div class="col-md"><button type="submit" class="vertical-center">Register</button></div>
<div class="col-md"></div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8NAi7idwsjVPjlBOIkmpwZs1fUqHPBVwKHnmSkjL0b9fA2dlCjBQ4ILxbCnn-k3quiCAtUiE3DUWynzxYuk0Rvo2t_5r8IQJ98_LsVMF63JU5682qAE87YsOMPaxddfBUVTo-3io_for7Zt2xvmc5LM"></form>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
</body>uj5u.com熱心網友回復：
好吧，你快到了 :D 但是有兩種方法
答案 1
在.navbar-custom添加此代碼到你已經擁有：
z-index: 1030;
left: 0;
right: 0;
top: 0;
所以你的.navbar-custom類看起來像這樣：
.navbar-custom {
width: 100%;
height: auto;
background-color: #2BAE66FF;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 1030;
left: 0;
right: 0;
top: 0;
}
我們做了什么？
z-index - 指定元素的堆疊順序。具有較大堆疊順序的元素始終位于具有較低堆疊順序的元素之前。
頂部、左側和右側- 頂部、底部、左側和右側屬性與位置一起用于設定元素的位置。它們只對定位元素有影響，定位元素是將 position 屬性設定為除靜態以外的任何元素的元素。例如：相對、絕對、固定或粘性。
我們基本上只是.navbar-custon在指定z-index后移動到正確的位置
我們可以做的其他事情：
還要創建類.container，margin-top: 200px;以便注冊表單將清除頂部的導航欄。（純粹出于審美目的）
答案 2
另外，如果你不想要的注冊表格上方導航欄在任何時候，你可以簡單地使用position: sticky;與top: 0;作為對方回答說，這將放置reigistration形式上方導航欄。在滾動時，它將消失。
代碼：
.navbar-custom {
width: 100%;
height: auto;
background-color: #2BAE66FF;
display: flex;
justify-content: space-between;
position: sticky;
top: 0;
}
我希望這會有所幫助：D
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338617.html
上一篇：將文本更改為隱藏和顯示的按鈕