Не могу расположить весь текст находящийся под бэкграундом наверх (bootstrap 5)

Question

@import 'normalize.scss';
@import 'reset.scss';
@import 'fonts.scss';
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 16px;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 50;
   :before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E97171;
  }
  .container {
    max-width: 1237px !important;
    .body {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      height: 100px;
      &__logo {
        &-item {}
      }
      &__menu {
        &-link {
          padding: 0;
          &-item {
            text-decoration: none;
            list-style-type: none;
          }
        }
      }
      &__form {}
      &__contact {}
    }
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 user-scalable=no">
  <!-- BOOTSTRAP -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>funiro</title>
</head>

<body>
  <header class="header">
    <div class="container">
      <div class="body row d-flex">
        <div class=" body__logo col-1">
          <a class="body__logo-item">
                        Funiro.
                    </a>

        </div>
        <div class="body__menu col-4">
          <ul class="body__menu-link d-flex">
            <li class="body__menu-link-item"><a href="#">Products</a></li>
            <li class="body__menu-link-item"><a href="#">Rooms</a></li>
            <li class="body__menu-link-item"><a href="#">Inspirations</a></li>
          </ul>

        </div>
        <div class="body__form col-5">
          <input type="text" placeholder="Search for minimalist chair">
        </div>
        <div class=" body__contact col-2">
          <a href="#"><img src="/images/heart.svg" alt=""></a>
          <a href="#">
            <img src="/images/Cart.svg" alt=""></a>
          <a href="#">
            <img src="/images/Ellipse 2.svg " alt=""></a>
          <div class="burger__menu">
            <span></span>
          </div>
        </div>
      </div>
  </header>



  <script src="js/main.min.js"></script>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>

Answer 1

Проблема была во вложенности псевдо элемента :before.. Я его расположил внутри тега header. А надо было прописать отдельно:

.header:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E97171;}

БЛОГ НА HUSL

Не могу расположить весь текст находящийся под бэкграундом наверх (bootstrap 5)

Ответы (1 шт):