How to position div above footer use css

问题描述 投票：0回答：2

我对页脚上方名为 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;
}
html css position
2个回答
0
投票

你应该对你的 CSS 做一点小改动：

footer #reklama{
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
}

如果你想居中你的div你必须添加

right:0; and left:0;

0
投票

div
需要在页脚上方吗？因为你为什么不把那个
div
放在你的
footer
外面？

否则，您可能需要将 

position
设置为 
absolute
，将 
top
属性设置为减去 
div
的高度（在您的情况下为 100 像素）。

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%;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.