Html 迪夫失踪了

嘿，每个人，我不确定这是由于定位还是什么，但我的一个div.footerwrap刚刚从我的页面消失，只有当我使定位相对时，它才会重新出现。我在没有添加定位的情况下成功地让我所有的其他页面正常工作，并且它很好地进入了底部。只是我的索引页给了我麻烦。有人知道它去了哪里，或者如何修复吗

HTML:

---

用我做的小提琴。看起来你可以看到页脚。所以很明显，它隐藏在我这边的一个图像后面。但是，正如您所看到的，它仍然没有正确定位。所以我想弄明白为什么

.footerwrap

不会像它应该的那样跌到底

我已经更新了你小提琴中的CSS。现在，页脚将始终位于底部。请在此处查看此链接。如果有帮助，请告诉我

对CSS进行了一些特定的更改

.wrapper{
    display: table;
    width: 100%;
    min-height: 100%;
    position: relative;
}
.footerwrap{
    width:100%;
    height:20px;
    bottom:0;
    z-index:1000;
    position: absolute;
}

---

除上述更改外，还对其中一个div容器进行了一个小更改，该容器处于绝对位置。必须将其更改为相对。

发布整个代码没有帮助。你的css有问题。当元素的

位置
不是绝对固定的或相对的
时，将
放在底部：0
没有多大作用。请使用浏览器的开发工具调查问题。如果使用顶部、底部、左侧、右侧等定位，则必须使用位置样式。例如，相对或绝对使div的父级位置相对，然后使页脚换行为绝对。可能是因为在
footerwrap
中缺少
position:absolute/fixed
和
left:0
。。。增加z指数，依此类推。。。好吧，在我在手机上输入这个答案之前，上面的用户已经给出了一些相同的建议：-）很酷，这个补丁似乎可以将.footerwrap向下推到底部。唯一的问题是将绝对值更改为相对值。它将其中的内容放在页面的顶部。我更新了提琴，因为我对div做了一些不需要的修改，但基本上是这样。textwrap需要在页脚上方结束，我认为。fader img正在制造混乱it@factordog：已使用“.wrapper”和“.footerwrap”中的上述更改更新了您的小提琴，现在它工作正常..textwrap仍在顶部浮动。所以我得好好玩玩，但你解决了我贴的问题。谢谢：）
@charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
    margin:0 auto;
    background:#171717;
    font-family: 'Roboto', sans-serif;
    color:#CCC;
} 
html, body {
    height: 100%;
}
a{
    color:#000;
    transition:300ms;
}
a:hover {
    color:#000;
}
a:link {
    text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
    display: table;
    width: 100%;
    height: 100%;
}
/*---------------------------- Header ----------------------------*/
.header{
    position:relative;
    min-height:180px;
    padding-right:225px;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-box-shadow: 0px 10px 20px 0px #333 ;
    -webkit-box-shadow: 0px 10px 20px 0px #333 ;
    box-shadow: 0px 10px 20px 0px #000;
    z-index:200;
}
.logo{
    position: absolute;
    min-width:60px; 
    top:4%;
}
.logo img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
.social{
    position: absolute;
    width:100%;
    min-width:20px; 
    top:15px;
    right:1%;
    z-index:500;    
}
.social img{
    float:right;
    width:35px;
    display: block;
    padding:0 0 0px 15px;
}
img.move {
    bottom:0px;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.4, 1.4, 1.4);    
}
/*---------------------------- Menu ----------------------------*/
.menu{
    position:absolute;
    width:100%;
    top:200px;
    z-index:401;
}
ul {
    margin: 0 auto;
    padding:0 0 5px 0;
    list-style-type: none;
}
li{
    display: inline;
    list-style:none;
    padding:1%;
    transition: all 300ms;
}
li a{
    color:#CCC;
    transition:300ms;
}
li a:hover {
    color:#900;
}
.menutxt{
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size:1.8vw;
    font-weight:400;
    z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt{
    width:100%;
    text-align: center;
    background:#070707;
    font-family: 'Roboto', sans-serif;
    padding:15px 0;
    font-size:0.7em;
    color:#FFFFFF;
    font-weight:200;
    margin: 0;
    box-sizing: border-box;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/
/*---------------------------- Logo Fader ----------------------------*/
.logofade{
  animation: logofadein 3s;
  -moz-animation: logofadein 3s; /* Firefox */
  -webkit-animation: logofadein 3s; /* Safari and Chrome */
  -o-animation: logofadein 3s; /* Opera */
}
}
@keyframes logofadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes logofadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes logofadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes logofadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/*---------------------------- menu Fader ----------------------------*/
.menufade{
    opacity:0;  
    animation: menufadein forwards 3s 1s;;
    -moz-animation:  menufadein forwards 3s 1s; /* Firefox */
    -webkit-animation:  menufadein forwards 3s 1s; /* Safari and Chrome */
    -o-animation:  menufadein forwards 3s 1s; /* Opera */
}
}
@keyframes  menufadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes  menufadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes  menufadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes  menufadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/*---------------------------- social Fader ----------------------------*/
.socialfade{
    opacity:0;  
    animation: socialfadein forwards 3s 0.5s;;
    -moz-animation:  socialfadein forwards 3s 0.5s; /* Firefox */
    -webkit-animation:  socialfadein forwards 3s 0.5s; /* Safari and Chrome */
    -o-animation:  socialfadein forwards 3s 0.5s; /* Opera */
}
}
@keyframes  socialfadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes  socialfadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes  socialfadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes  socialfadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@charset "utf-8";
/*---------------------------- Image Fader ----------------------------*/
.fader img {
    position:absolute;
    width:100%;
    max-height:550px;
    min-height:200px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    z-index:1;  
}
@keyframes faderFadeInOut {
    0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
.fader img.top {
    animation-name: faderFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-direction: alternate;
}
/*---------------------------- Content ----------------------------*/
.contentwrap{
    position:absolute;
    margin-top:480px;
    width:100%;
    z-index:300;
    background:#171717;
}
.textwrap{
    width:100%;
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
    z-index:100;
}
/* clearfix */
.textwrap:after {
    content: "";
    display: table;
    clear: both;
}
.content,
.divider,
.content2,
.contentspace {
    text-align:center;
    float: left;
}
.divider{
    width: 24%;
    margin: 0 1% 1% 0;
}
.divider img{
    display: block;
    margin-top:50px;
    margin-left: auto;
    margin-right: auto;
}
.content,
.content2 {
    width: 15%;
    margin: 0 1% 1% 0;
}
.content img{
    width:15%;
}
.contentspace{
    width: 20%;
    margin: 0 1% 1% 0;   
}
.headertxt{
    font-family: 'Roboto', sans-serif;
    font-weight:600;
    font-size:2em;
}
/* clearfix */
.contentspace:after {
    content: "";
    display: table;
    clear: both;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap{
    width:100%;
    height:20px;
    bottom:0px;
    z-index:1000;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/
/*---------------------------- Content Fader ----------------------------*/
.movefade{
  opacity:0;  
  animation: fadein forwards 3s 1.5s;
  -moz-animation: fadein forwards 3s 1.5s; /* Firefox */
  -webkit-animation: fadein forwards 3s 1.5s; /* Safari and Chrome */
  -o-animation: fadein forwards 3s 1.5s; /* Opera */

}
@keyframes fadein {
    from {
        transform: translate(0,-10px);
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        transform: translate(0,-10px);
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        transform: translate(0,-10px);
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        transform: translate(0,-10px);
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.wrapper{
    display: table;
    width: 100%;
    min-height: 100%;
    position: relative;
}
.footerwrap{
    width:100%;
    height:20px;
    bottom:0;
    z-index:1000;
    position: absolute;
}