Bootstrap Footer Z-Index - PullRequest
Новая
       22

Bootstrap Footer Z-Index

0 голосов
/ 02 ноября 2018

Привет и заранее спасибо за помощь. Вот ссылка на этот сайт: caulfield.co / test /

Я пытаюсь создать эффект раскрытия нижнего колонтитула с помощью Bootstrap 4. Кажется, я не могу отредактировать z-index из fixed-bottom footer, чтобы скрыть его за телом div, чтобы он показывался только после прокрутка к нижней части body, чья margin-bottom равна высоте div. Почему-то при попытке отредактировать z-index ничего не происходит. Я предполагаю, что это что-то такое в CSS Bootstrap, но не знаю, с чего начать. Кто-нибудь может помочь?

CSS: 

.body-temp{
  height:1000px;
  margin-bottom:300px;
  background-color:black;
  z-index:5000;
}


/* Footer
-------------------------------------------------- */

footer{
  height:300px;
  background-color:#232323;
  margin: 0 auto;
  text-align:center;
  font-weight:300;
  font-size:.8rem;
  color:#666666;
  z-index: -1000;
}

HTML: 

<div class="container body-temp">
  </div>


  <!-- Footer
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
      <footer class="container-fluid fixed-bottom">
        <a class="" href="#">
          <img class="grow" id="footer-logo" src="images/mb-white.svg" alt="Margaret Biggs Fine Art">
        </a>
        <p>&copy; 2018 Margaret Biggs</p>
        <div>
          <a class="footer-icons" href="#">
              <i class="fab fa-linkedin-in"></i>
          </a>
          <a  class="footer-icons" href="#">
              <i class="fab fa-facebook-f"></i>
          </a>
        </div>
      </footer>

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Самое быстрое и простое решение - просто установить положение div .body-temp, как показано ниже: 

.body-temp {
    position: relative;
}

При этом я хотел бы обернуть весь ваш div .body-temp в оболочку и указать цвет фона для указанного div-оболочки:

HTML 

<div class="body-wrapper">
    <div class="container body-temp"></div>
</div>
<footer class="container-fluid fixed-bottom">
    <a class="" href="#">
        <img class="grow" id="footer-logo" src="images/mb-white.svg" alt="Margaret Biggs Fine Art">
    </a>
    <p>© 2018 Margaret Biggs</p>
    <div>
        <a class="footer-icons" href="#">
            <i class="fab fa-linkedin-in"></i>
        </a>
        <a class="footer-icons" href="#">
            <i class="fab fa-facebook-f"></i>
        </a>
    </div>
</footer>

CSS 

.body-wrapper {
    position: relative;
    z-index: 5000;
    background-color: #fff;
}
0 голосов
/ 02 ноября 2018

Да, это загрузчик, переопределяющий вас css через специфику css.

Вы добавили BS clss fixed-bottom с z-index 1030.

селектор footer не будет его перевешивать.

Используйте footer.fixed-bottom, чтобы переопределить БС через специфику.

По делу body-temp. Имеет position: static. Это не будет работать с z-index. Чтобы решить эту проблему, добавьте position: relative к вашим body-temp стилям.

MDN DOCS для z-index

"Для позиционированного бокса (то есть с любым положением, отличным от статического) свойство z-index задает: ..."

Надеюсь, это поможет:)

...