0

Всем привет, у меня есть проблема, я сделал шапку с position fixed, указываю z index, а элементы все равно залезают на шапку при скроле, помогите пожалуйста

* {
  font-family: 'Roboto Flex', sans-serif;
}

html,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #50386a;
  position: relative;
}

body {
  background: #f6f6f6;
}

a {
  text-decoration: none;
  color: inherit;
}


/*
    HEADER
*/

header {
  /* background: #f6f6f6;*/
  height: 70px;
  width: 100%;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  position: fixed;
  z-index: 99;
  top: 0px;
  left: 0px;
}

header * {
  color: #50386a;
}

header h1 {
  margin-top: 13px;
}

header h1 a {
  color: #50386a;
}

header h1 a:hover {
  color: #50386a;
}

header ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: right;
  margin-top: -4px;
}

header ul li {
  float: left;
}

header ul li a {
  display: block;
  font-size: 1.7rem;
  text-decoration: none;
  color: #50386a;
  padding: 22px;
}

header ul li i:hover {
  color: #ae9fae;
  transition: 0.4s;
}

header ul li ul {
  position: absolute;
  top: 70px;
  right: 165px;
  width: 180px;
  display: none;
  z-index: 3;
}

header ul li ul a:hover {
  background-color: #ae9fae;
  transition: 0.4s;
}

header ul li:hover ul {
  display: block;
}

header ul li ul li {
  width: 100%;
}

header ul li ul li a {
  width: 100%;
  font-size: 1.1rem;
  padding: 10px;
  background: #50386a;
  color: seashell;
}

body {
  padding-top: 70px;
  margin-top: 0;
}

wrapper {
  display: block;
  z-index: 1;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tegs -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/df93ccd354.js" crossorigin="anonymous"></script>
  <!-- Custum Styling -->
  <link rel="stylesheet" href="css/styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100;200;300;400;500;600;700;800;900;1000&display=swap" rel="stylesheet">
  <title>zxcoder</title>
</head>

<body>
  <!-- NAVIGATION -->

  <header class="container-fluid">

    <div class="container">
      <div class="row">
        <div class="col-4">
          <h1>
            <a href="/dinamic-site/">zxcoder</a>
          </h1>
        </div>
        <nav class="col-8" id="nav">
          <ul>
            <li>
              <a href=""><i class="fa-solid fa-list"><alt=></alt></i></a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-heart"></i></a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-cart-shopping"></i></a>
            </li>

            <li>
              <a href=""><i class="fa-solid fa-user"></i></a>
              <line>
                <ul>
                  <li><a href="">Админ панель</a></li>
                  <li><a href="">Профиль</a></li>
                  <li><a href="">Выход</a></li>
                </ul>
            </li>
          </ul>
        </nav>

      </div>
    </div>
  </header>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  <script type="module" src="/dinamic-site/js/script.js"></script>
  <div class="container">
    <div class="wrapper" id="wrapper">
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
    </div>
  </div>
</body>

</html>

Новый участник
zxcoder — новый участник сайта. Будьте снисходительны, задавая уточняющие вопросы, комментируя и отвечая. Почитайте про нормы поведения.
6
  • А вы селектор проверьте...
    – ΝNL993
    18 мар в 20:34
  • Можете подсказать что это?
    – zxcoder
    18 мар в 20:41
  • Текст, который пишется перед { ... } и используется для указания элемента на который будет применяться стиль.
    – ΝNL993
    18 мар в 20:46
  • Спасибо за попытку помочь, дело было в том что бэкгрануд хедера был прозрачный
    – zxcoder
    18 мар в 20:57
  • В любом случае вам стоит обратить внимание на последний селектор (этот: wrapper). Он будет работать только с теми элементы у которых название тега, является <wrapper>. Чтобы починить это, добавьте в начале, либо точку ., либо хештег #, чтобы селектор работал с тем элементом, который существует в HTML странице.
    – ΝNL993
    18 мар в 21:08

1 ответ 1

1

я сделал шапку с position fixed, указываю z index, а элементы все равно залезают на шапку при скроле

Они не "залезают" на шапку. Просто у шапки прозрачный фон и их видно "под" шапкой.

Я вернул background: #f6f6f6; - так ничего не "залезает".

* {
  font-family: 'Roboto Flex', sans-serif;
}

html,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #50386a;
  position: relative;
}

body {
  background: #f6f6f6;
}

a {
  text-decoration: none;
  color: inherit;
}


/*
    HEADER
*/

header {
  background: #f6f6f6;
  height: 70px;
  width: 100%;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  position: fixed;
  z-index: 99;
  top: 0px;
  left: 0px;
}

header * {
  color: #50386a;
}

header h1 {
  margin-top: 13px;
}

header h1 a {
  color: #50386a;
}

header h1 a:hover {
  color: #50386a;
}

header ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: right;
  margin-top: -4px;
}

header ul li {
  float: left;
}

header ul li a {
  display: block;
  font-size: 1.7rem;
  text-decoration: none;
  color: #50386a;
  padding: 22px;
}

header ul li i:hover {
  color: #ae9fae;
  transition: 0.4s;
}

header ul li ul {
  position: absolute;
  top: 70px;
  right: 165px;
  width: 180px;
  display: none;
  z-index: 3;
}

header ul li ul a:hover {
  background-color: #ae9fae;
  transition: 0.4s;
}

header ul li:hover ul {
  display: block;
}

header ul li ul li {
  width: 100%;
}

header ul li ul li a {
  width: 100%;
  font-size: 1.1rem;
  padding: 10px;
  background: #50386a;
  color: seashell;
}

body {
  padding-top: 70px;
  margin-top: 0;
}

wrapper {
  display: block;
  z-index: 1;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tegs -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/df93ccd354.js" crossorigin="anonymous"></script>
  <!-- Custum Styling -->
  <link rel="stylesheet" href="css/styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100;200;300;400;500;600;700;800;900;1000&display=swap" rel="stylesheet">
  <title>zxcoder</title>
</head>

<body>
  <!-- NAVIGATION -->

  <header class="container-fluid">

    <div class="container">
      <div class="row">
        <div class="col-4">
          <h1>
            <a href="/dinamic-site/">zxcoder</a>
          </h1>
        </div>
        <nav class="col-8" id="nav">
          <ul>
            <li>
              <a href=""><i class="fa-solid fa-list"><alt=></alt></i></a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-heart"></i></a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-cart-shopping"></i></a>
            </li>

            <li>
              <a href=""><i class="fa-solid fa-user"></i></a>
              <line>
                <ul>
                  <li><a href="">Админ панель</a></li>
                  <li><a href="">Профиль</a></li>
                  <li><a href="">Выход</a></li>
                </ul>
            </li>
          </ul>
        </nav>

      </div>
    </div>
  </header>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  <script type="module" src="/dinamic-site/js/script.js"></script>
  <div class="container">
    <div class="wrapper" id="wrapper">
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
      <h2>asdsadas</h2>
    </div>
  </div>
</body>

</html>

1
  • О боже... Вы мой спаситель, спасибо огромное
    – zxcoder
    18 мар в 20:57

Ваш ответ

zxcoder — новый участник. Будьте дружелюбны к нему и не забывайте про нормы поведения.

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.