我有关于在页脚之上称为reklama的div的位置的问题。在这个论坛上，我找到了解决问题的方法。我把两个选择器放入我的div中。 位置：相对;并且顶部：-150px; 但是现在我的页脚的大小改变了reklama的div的大小。 谢谢你的帮助。
html代码：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet" type="text/css" media="all" >
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
<script type="text/javascript" src="js/zakladki.js"></script>
<script type="text/javascript" src="js/ustawStopke.js"></script>
<body>
<div class="contains">
<header class="shadow">
<div class="UpHeader">
<div>
<img src="http://www.gimnazjum.org.pl/obrazki/logoG1.JPG" alt="Moje Dane" />
</div>
<div>
<span>TEST TESTO</span>
<span>zwiększ przychody swojej firmy</span>
</div>
</div>
<!-- <div class="DownHeader">
<ul>
<li>Home</li>
<li>Pomoc</li>
<li>Zalogowany jako:</li>
<li>Lead-Partner-Punkt</li>
<li>Wyloguj</li>
</ul>
</div>-->
</header>
<section>
<div class="logowanie">
<form action="konto.php" method="POST">
login: <input type="text" name="login" /> <BR/>
haslo: <input type="text" name="password" /> <BR/>
<button type="submit"> Zatwierdź</button>
</form>
</div>
</section>
<footer>
<div id="reklama" style="position: relative; top: -150px;">
vgcxfhgfc
</div>
<div class="up">
<div class="dane1">
<span class="info">test S.A</span><BR/>
<span class="dane">ul. test 9, 32,085 test</span>
</div>
<div class="dane2">
<span class="info">tel.</span> <span class="dane">test </span><BR/>
<span class="info">fax.</span> <span class="dane">test</span>
</div>
<div class="dane3">
<span class="info">e-mail:</span><BR/>
<span class="dane">test@test</span>
</div>
</div>
<div class="down">
© 2014 Copyright test S.A
</div>
</footer>
</div>
</body>
</html>
css：
* {
margin: 0 auto;
}
.contains {
width: 100%;
/*height: 100%;*/
/*height: auto;*/
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
background-color: #f6f6f6;
/*background-color: #ff6805;*/
}
header {
width: 100%;
background-color: #000000;
color: white;
font-family: Verdana;
padding-bottom: 12px;
font-size: 0.9vw; /*iMacius*/
height: 106px;
}
header .UpHeader {
width: 60%;
/*height: auto;*/
background-color: black;
float: left;
}
header .UpHeader div img {
height: 78px;
width: 78px;
float: left;
padding: 20px;
}
/* napis */
header .UpHeader div span:first-child {
color: white;
float:left;
padding-top: 50px;
padding-left: 1px;
font-size: 1.1em;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
header .UpHeader div span:last-child {
color: red;
font-size: 14px;
float:left;
padding-top: 52px;
padding-left: 10px;
font-size: 0.8vw;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
header .DownHeader{
width: 40%;
/*height: auto;*/ /*iMacius*/
/*height: 18px; iMacius*/
background-color: black;
float: right;
padding-top: 96px;
text-align: right;
}
header.ul {
display: block;
width: 100%;
list-style-type: none;
}
header li {
/*float: right;*/
display: inline;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
padding-right: 12px;
}
header li:first-child {
/* color:black;
padding: 12px 10px 12px 12px;
border: none;
background-color: #f6f6f6; */
}
header li:last-child {
padding: 12px;
color:black;
background-color: #f6f6f6;
border-radius: 2px;
}
header li:nth-child(3) {
color: #ff6805;
/* padding-right: 12px;*/
}
.shadow {
top: -1px;
-webkit-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.3);
z-index:5;
}
section{
width: 88%;
/*border: 1px solid black;*/
padding-top: 20px;
padding-bottom: 12px;
clear: both;
/*background-color: #ff6805*/
}
section.zakladki {
background-color: pink;
}
footer {
width: 100%;
background-color: #353535;
position: relative;
/* position:absolute;
bottom:0;*/
}
footer #reklama {
width:650px;
height:100px;
background: black;
position: relative;
top: -150px;
}
footer.up {
/*background-color: ;*/
width:100%;
padding-top: 10px;
}
footer .up .dane1 {
padding-top: 10px;
padding-bottom: 10px;
float:left;
width:33%;
}
footer .up .dane2 {
padding-top: 10px;
float:left;
width:34%;
}
footer .up .dane3 {
padding-top: 10px;
float:left;
width:33%;
}
/*Pierwsza kolumna*/
footer .up .dane1 > .info {
float: left;
color: white;
padding-left: 60px
}
footer .up .dane1 > .dane {
float: left;
color: gray;
/*padding-left: 20px*/
}
/*Druga Kolumna*/
footer .up .dane2 > .info {
float: bottom;
color: white;
padding-left: 39%;
}
footer .up .dane2 > .dane {
float: bottom;
color: gray;
padding-left: 1%;
}
/*trzecia Kolumna*/
footer .up .dane3 > .info {
color: white;
float:right;
padding-right: 65px;
}
footer .up .dane3 > .dane {
color: gray;
float:right;
padding-right: 10px;
}
footer .down {
width:100%;
font-size: 14px;
color: gray;
text-align:center;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
background-color: black;
}
footer > p {
font-size: 16px;
}
/*zakladki*/
UL.mytabs {
position: relative;
z-index: 2;
}
UL.mytabs, UL.mytabs LI {
margin: 0;
padding: 0;
list-style: none;
float: bottom;
}
UL.mytabs LI { padding-right: 2px; }
UL.mytabs LI A {
float: left;
padding-left: 22px;
padding-top: 12px;
padding-right: 22px;
padding-bottom: 12px;
/*border: 1px solid #E0E0E0;*/
border-bottom: 1px solid #E0E0E0;
background: #F5F5F5;
text-decoration: none;
color: black;
height: 22px;
}
UL.mytabs LI A[href^="zak1"] {
color:black;
background:#f6f6f6 url(../img/mojeLeady.png) no-repeat 0 0;
background-position: 7px 7px;
padding-left: 50px;
display:block;
font-size: 0.85em;
/* height:20px;
width:100px;*/
}
UL.mytabs LI A[href="zak1.html"]:hover {
color:#ff6805;
background:#f6f6f6 url(../img/mojeLeady.png) no-repeat 0 0;
background-position: 7px 7px;
padding-left: 50px;
display:block;
font-size: 0.85em;
}
UL.mytabs LI.current A[href="zak1.html"]{
color:white;
background:#ff6805 url(../img/mojeLeady.png) no-repeat 0 0;
background-position: 7px 7px;
padding-left: 50px;
display:block;
font-size: 0.85em;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
background: #FFFFFF;
}
UL.mytabs LI.current A {
font-size: 16px;
/*border: 1px solid #ff6805;*/
color: white;
background-color: #ff6805;
}
.mytabs-container {
position: relative;
z-index: 1;
clear: both;
/* border: 3px solid #ff6805; */
border-top-color:#ff6805;
border-style: solid;
padding: 10px;
overflow: hidden;
/* border-bottom-width: 0px; */
border-width: 1px 0px 0px 0px;
top: -1px;
-webkit-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.3);
z-index:5;
}
.zwyklyLink {
text-decoration: none;
color: black;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.zmianaHasla {
float: bottom;
width: 300px;
}
.zmianaHasla button[type="submit"] {
background: url(../img/btn-bg.png);
border-radius: 3px;
border: 0;
clear: both;
line-height: 37px;
height: 37px;
width: 200px;
color: #FFF;
font-size: 18px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
float: right;
}
答案 0 :(得分：0)
div是否需要高于您的页脚？因为为什么不把div放在footer之外？
否则，您可能需要将position设置为absolute，将top设置为减去div的高度（在您的情况下为100 px）。
footer #reklama {
width: 650px;
height: 100px;
background: black;
position: absolute;
top: -100px;
}
对于div的居中，您可以使用以下代码。
footer #reklama {
width: 650px;
height: 100px;
background: black;
position: absolute;
top: -100px;
left: 0;
right: 0;
}
如果你想让div获得你的页脚宽度和自动高度。
删除所有定位并将其留在此处。
footer #reklama {
background: black;
width:100%;
}
答案 1 :(得分：0)
您应该对CSS进行一些小改动：
footer #reklama{
position: absolute;
top: -100px;
left: 0;
right: 0;
}
如果您想将div居中，则必须添加right:0; and left:0;