Нижний колонтитул исчезает при добавлении фиксированной позиции

ProgramBox

Нижний колонтитул исчезает при добавлении фиксированной позиции

Post author:admin
Запись опубликована:16 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css — файл #css

Вопрос:

Я создал простую страницу с фиксированным нижним колонтитулом внизу.

Конечный результат, которого я хочу достичь, выглядит следующим образом https://www.sallyhart.photography /#

Вы можете увидеть мой codepen здесь >>

 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.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80");
  background-attachment: fixed;
  background-size: cover;
}

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

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


section.fourth {
  background-image: url("https://images.unsplash.com/photo-1552403709-27a46aab46de?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1570amp;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.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;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.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80");
  background-attachment: fixed;
  background-size: cover;
}

section.sixth {
  background-image: url("https://images.unsplash.com/photo-1550668180-3205f7bb6a9e?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2850amp;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, весь нижний колонтитул каким-то образом исчез.

Кто-нибудь, пожалуйста, может помочь мне с решением этой проблемы?

Большое спасибо ! 🙂

Ответ №1:

Измените position нижний колонтитул на fixed . Удалите margin-top и добавьте bottom: 0; (или любое расстояние от самого низа экрана, которое вы хотите.).

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

Ответ №2:

footer должно быть так:

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

Итак, bottom: 20px и fixed .

Ответ №3:

Позиционируйте его фиксированным вместо абсолютного.

 footer { position: fixed; bottom: 40px; left: 40px; }