一个html分区堆叠在另一个之上

我正在制作一个小网页，如下所示。结尾有一个页脚，上面写着"Vipul Tyagi用爱制造"。问题是它超越了上一个部门(反馈形式(。无论我对页脚应用多少top属性，它都不会向下移动。

请查看我的代码并帮助我找到问题。您会在</body>标签上方的html中找到它的最末尾。

提前感谢！

$(document).ready(function() {
$("#notif-list li").click(function(e) {
var num = parseInt($("#notif-number").text());
$(this).remove();
$("#notif-number").html("" + num - 1 + "");
});
});

.container1 {
position: relative;
color: white;
}
.centered {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.top-left {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
}
.heading {
font-family: 'Orbitron', serif;
}
#headmain {
font-size: 50px;
position: relative;
left: -55px;
color: white;
}
#headsecondary {
position: relative;
right: 5%;
color: white;
}
#top-content {
position: relative;
top: 40px;
width: 100%;
background-color: #bbb;
padding: 10px;
}
a {
color: white;
}
.number {
position: absolute;
top: -5px;
right: -2px;
padding: 5px 10px;
border-radius: 30%;
background: green;
color: white;
}
.borderimg {
border-radius: 30%;
}
.carosel {
width: 670px;
}
.service-list {
font-family: 'Lobster', cursive;
font-size: 50px;
}
.labels {
font-size: 15px;
}
.login-box {
width: 320px;
height: 520px;
top: 290px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #1c8adb;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: #39dc79;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 14px;
color: #fff;
}
.login-box a:hover {
color: #39dc79;
}
@media screen and (max-width: 450px) {
.carosel {
width: 300px;
}
.top-left {
position: absolute;
top: 35%;
left: 55%;
transform: translate(-50%, -50%);
}
#headmain {
font-size: 30px;
position: relative;
left: -20px;
color: white;
}
#headsecondary {
font-size: 20px;
position: relative;
right: 5%;
color: white;
}
#service-list {
font-family: 'Lobster', cursive;
font-size: 30px;
}
.login-box {
width: 300px;
height: 500px;
position: relative;
top: 50px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" style="opacity: 0.9;top: 10px;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>                        
</button>
<a class="navbar-brand" href="#"><img src="sankalpsoft.png" style="height: 30px; width: 30px;bottom : 10px;" /></a>
<a class="navbar-brand" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">SankalpSoft</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Home</a></li>
<li class="dropdown">
<a href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">About Us</a>
</li>
<li><a href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Why We?</a></li>
<li><a href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Products</a></li>
<li><a href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Services</a></li>
<li><a href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Blogs</a></li>
<li><a href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Notification<span class="number" id="notif-number">4</span></a>
<ul class="dropdown-menu" id="notif-list">
<li style="padding: 10px 5px;"><a href="#">Notification 1</a></li>
<li style="padding: 10px 5px;"><a href="#">Notification 2</a></li>
<li style="padding: 10px 5px;"><a href="#">Notification 3</a></li>
<li style="padding: 10px 5px;"><a href="#">Notification 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="width: 100%;padding-left: 0;padding-right: 0;">
<img src="https://i.postimg.cc/PpNsdrDS/back-img.jpg" alt="Snow" style="width: 100%;height: 350px;filter: grayscale(10%) brightness(60%) contrast(1);box-shadow: 5px 15px 8px #888888;">
<div class="top-left">
<h1 class="heading" id="headmain">SankalpSoft Solutions</h1>
<h3 class="heading" id="headsecondary">We Provide intelligent business support</h3>
</div>
</div>
</div>
<div class="container carosel" style="height: 340px;top: 40px;">
<h2 style="text-align: center;" class="service-list">Services We provide</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="box-shadow: 20px 10px 8px #888888;border-radius: 10%;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active borderimg">
<img src="https://i.postimg.cc/kVQDWsY0/business.jpg" alt="business" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/XGnqL5Tp/outsourcing.jpg" alt="outsourcing" style="width:100%;">
</div>
<div class="item borderimg">
<img src="ttps://i.postimg.cc/dDLwYnmJ/webdevelopment.jpg" alt="webdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/K1T6YHRy/applicationdevelopment.png" alt="applicationdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/gn105QC9/customersupport.jpg" alt="customersupport" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container login-box" style="position: relative;border-radius: 10%;">
<h1 class="login service-list" style="text-align: center;">Feedback here</h1>
<p class="login service-list labels">Name</p>
<input type="text" name="Name" placeholder="" id="usernm" required>
<p class="login service-list labels">Contact No</p>
<input type="password" name="password" placeholder="" id="contact" required>
<p class="login service-list labels">Message</p>
<input type="text" name="message" placeholder="" id="msg" required>
<input class="service-list" type="submit" name="submit" value="Submit" id="signupbut" class="login"></input>
</div>
<div class="container footer" style="position: relative;background-color: black;width: 100%;margin: 0;padding: 10px;">
<p style="color: white; font-size: 20px;text-align: center;">Made with <span>&#10084;</span> by Vipul Tyagi</p>
</div>
</body>
</html>

EDIT虽然我找到了解决方案，但我仍然不明白问题出在哪里？我从来没有见过top这样的行为！

将页脚围绕在页脚标记上，并使用该标记调整页面上的位置。我使用的内联css是

margin-top: 50%;

我还为你加了一把js小提琴。看看这个链接：https://jsfiddle.net/zfhassaan/5syxnme1/1/

在class="container footer"的样式中，您使用了position作为相对位置。所以，你可以在你的风格中添加top:一些像素(例如：top:200px(，以保持页脚在你想要的位置。供参考：https://www.w3schools.com/css/css_positioning.asp

相关内容

最新更新

热门标签：