嘿大家我不确定它是由于定位还是什么，但是我的一个div .footerwrap刚刚从我的页面中消失了它只会重新出现，如果我使定位相对。我设法让我的所有其他页面工作，而不添加定位，它很好地到底。只是我的索引页面给了我麻烦。任何人都知道它去了哪里或如何解决？
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/home_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="social">
<aside class="socialfade">
<a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
<a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
<a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
</aside><!--close socialfade!-->
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<aside class="logofade">
<img src="images/logo.png" />
</aside><!--close logofade-->
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<aside class="menufade">
<li><a href="index.html">HOME</a>
</li>
<li><a href="portfolio.html">PORTFOLIO</a>
</li>
<li><a href="contact.html">CONTACT</a>
</li>
</aside>
</ul>
</div>
<!--close menu!-->
<!--===================================================Fader===================================================!-->
<div class="fadewrapper">
<div class="fader">
<img class="bottom" src="images/dsas.png" />
<img class="top" src="images/dsa.png" />
</div>
</div>
<!--===================================================Content===================================================!-->
<div class="contentwrap">
<div class="textwrap">
<aside class="movefade">
<div class="contentspace"></div>
<!--close contentspace!-->
<div class="content">
<p class="headertxt">Specializations</p>
<p>With various skills in branding,
multi-media and advertising I am able to provide fresh and inspiring solutions for the task given to me. Using various programs suchas:</p>
<p>
<img src="images/1436419348_Photoshop.png" />
<img src="images/1436419350_Illustrator.png" />
<img src="images/1436419354_Dreamweaver.png" />
<img src="images/1436419357_Premiere_Pro.png" />
<img src="images/1436419359_After_Effects.png" />
<img src="images/1436419356_Flash_Pro.png" />
</p>
</div>
<!--close content!-->
<div class="divider">
<img src="images/divide.png" />
</div>
<!--close divider!-->
<div class="content2">
<p class="headertxt">Why me?</p>
<p>The work I create is reflecting something fresh and exciting in order to meet the clients needs. About pushing for new and innovative ideas and pushing for an end result of brand and product growth</p>
</div>
<!--close content2!-->
<div class="contentspace"></div>
<!--close contentspace!-->
</aside>
<!--close test!-->
</div>
<!--close textwrap!-->
</div>
<!--close contentwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
CSS：
@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;
}
}
我做的小提琴。看起来你可以看到页脚。所以它显然隐藏在我身边的一张图像背后。但是，你可以看到它仍然没有正确定位。因此，我试图弄清楚为什么.footerwrap不应该像它应该的那样。 http://jsfiddle.net/80ftLxtc/1/
答案 0 :(得分：1)
我已经更新了你的小提琴中的CSS。现在页脚将始终位于底部。在这里查看此链接。如果有帮助，请告诉我。
http://jsfiddle.net/80ftLxtc/3/
一些特定的CSS更改
.wrapper{
display: table;
width: 100%;
min-height: 100%;
position: relative;
}
.footerwrap{
width:100%;
height:20px;
bottom:0;
z-index:1000;
position: absolute;
}
除了上述变化之外，还对一个绝对定位的div容器进行了一些小改动。不得不把它改成亲戚。