html - 添加固定位置时页脚消失

Question

我做了一个简单的页面，底部有一个固定的页脚。

我最终想要达到的效果是这样的https://www.sallyhart.photography/#

You can see my codepen here >>

footer {
  display: inline-block;
  position: absolute;
  margin-top: -40px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
}

/*-- Global--*/
* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
}

html, body {
  height: 100%;
}

@import @import url('https://fonts.googleapis.com/css?family=Fjalla+One');

/*-- Title --*/
h1 {
  position: absolute;
  position: fixed;
  top: 30px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
  font-weight: 400;
  color : white;
}

p {
  position: absolute;
  position: fixed;
  top: 70px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
  font-weight: 200;
  color : white;
}

footer {
  display: inline-block;
  position: absolute;
  margin-top: -40px;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
}

footer a {
  margin-right: 15px;
  font-weight: 200;
  text-decoration: initial;
  color: white;
}


/*-- Image section--*/

section {
  width: 100%;
  height: 100%;
}


section.first {
  background-image:url("https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.second {
  background-image: url("https://images.unsplash.com/photo-1552426948-96ed4eb0509c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1955&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.third {
  background-image: url("https://images.unsplash.com/photo-1551030973-c739c33a78bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1921&q=80");
  background-attachment: fixed;
  background-size: cover;
}


section.fourth {
  background-image: url("https://images.unsplash.com/photo-1552403709-27a46aab46de?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1570&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.fourth {
  background-image: url("https://images.unsplash.com/flagged/photo-1551337213-0b69f29206e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.fifth {
  background-image: url("https://images.unsplash.com/flagged/photo-1551337213-0b69f29206e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.sixth {
  background-image: url("https://images.unsplash.com/photo-1550668180-3205f7bb6a9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
  background-attachment: fixed;
  background-size: cover;
}

<header>
  <h1>Sally Hart</h1>
  <p>Photographer and designer</p>
</header>


<section class="first"></section>
<section class="second"></section>
<section class="third"></section>
<section class="fourth"></section>
<section class="fifth"></section>
<section class="sixth"></section>

<footer>
  <a href="#">Email</a>
  <a href="#">Twitter</a>
  <a href="#">Instagram</a>
</footer>

我想让页脚贴在底部，滚动网页时总是显示在左下角，现在它没有显示在第一页上，只在最后一张图片的顶部显示滚动到它显示的底部。

当我添加 position:fixed 到 css 时，整个页脚不知何故消失了。

谁能帮我解决这个问题？

非常感谢! :-)

Answer 1

将页脚的 position 更改为 fixed。删除 margin-top 并添加 bottom: 0;(或您想要的距屏幕底部的任何距离。)。

footer {
  display: inline-block;
  position: fixed;
  bottom: 0;
  left: 40px;
  font-family: 'Fjalla One', sans-serif;
}