Не работает свойство в CSS position: sticky

Question

Не работает свойство position: sticky

При прокрутке верхняя панель (в которой только картинка) не прокручивается

* {
  box-sizing: border-box;
}

.product-name {
  font-family: 'Montserrat', Arial, sans-serif;
}

h2,
title,
h1 {
  color: white;
  margin-bottom: 0;
}

h3 {
  margin-bottom: 0em;
  margin-top: 0em;
}

body {
  background-color: #000000;
}

.general-handler {
  display: flex;
  justify-content: center;
}

.pcs {
  font-family: Montserrat;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  align-self: center;
  flex-wrap: wrap;
  width: 80%;
}

.product-card-handler {
  padding: 40px;
}

.product-card {
  background-color: #191919;
  border-radius: 28px;
  overflow: hidden;
  border-spacing: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 400px;
}

.product-image {
  width: 100%;
  height: auto;
}

.product-info {
  font-size: 25px;
  text-align: center;
  padding: 0px;
}

.price-se {
  font-size: 25px;
  text-align: center;
  padding: 0px;
  margin-top: 0.2em;
}

.button-container {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  padding-top: 0px;
}

.buy-button,
.details-button {
  background-color: #a01f1f;
  color: white;
  border: none;
  border-radius: 22px;
  padding: 15px 13px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-family: Montserrat;
  font-weight: 600;
  text-transform: uppercase;
  ;
  font-size: 1.1rem;
  transition: border-radius 0.3s;
}

.buy-button {
  background-color: #191919;
  border: 2px solid white;
}

.buy-button:hover {
  background-color: #290000;
  padding: 13px 11px;
  border: 4px solid #ff4d4d;
}

.details-button:hover {
  background-color: #ad0000;
  border-radius: 18px;
  transition: border-radius 0.3s;
  transform: border-radius 10px 0.2s;
}

.text {
  color: white;
  font-family: Montserrat;
  font-weight: 600;
  text-transform: uppercase;
}

.pc-edition {
  padding-top: 0px;
  padding-bottom: 0px;
  color: #e8bb00;
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
  text-align: center;
}

.navbar-button {
  background-color: #a01f1f;
  color: white;
  border: none;
  border-radius: 22px;
  padding: 15px 13px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-family: Montserrat;
  font-weight: 600;
  text-transform: uppercase;
  ;
  font-size: 1.1rem;
  transition: border-radius 0.3s;
}

.header-subclass {
  display: inline-block;
  width: 25%;
}

.logo {
  width: 25%;
}

header {
  border: hidden;
  justify-self: center;
  position: sticky;
  overflow: visible
}

.navbar-handler {
  border: hidden;
  justify-self: center;
  position: sticky;
}

<!doctype html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  <link rel="icon" href="/favicon.png" type="image/png" />
  <title>VCPC</title>
  <link rel="stylesheet" href="styles.css" />
  <script src="js/navbar.js"></script>
</head>

<body>
  <div class="navbar-handler">
    <img class="logo" src="favicon.png" />
  </div>
  <div class="general-handler">
    <div class="pcs" id="nav">
      <div class="product-card-handler" data-sort="Work" data-desc="Work">
        <div class="product-card">
          <img src="images/work.png" alt="Наименование товара" class="product-image" />
          <h2 class="product-info">VCPC Work</h2>
          <h2 class="product-info">49 999 ₽</h2>
          <div class="button-container">
            <form action="page/new.html" target="_blank">
              <button class="buy-button" onclick="window.location.href = 'http://example.com';">Купить</button>
            </form>
            <button class="details-button">Подробнее</button>
          </div>
        </div>
      </div>
      <div class="product-card-handler" data-sort="Standart" data-desc="Standart">
        <div class="product-card">
          <img src="images/standart.png" alt="Наименование товара" class="product-image" />
          <h2 class="product-info">VCPC Standart</h2>
          <h2 class="product-info">79 999 ₽</h2>
          <div class="button-container">
            <button class="buy-button" onclick="window.location.href = 'http://example.com';">Купить</button>
            <button class="details-button">Подробнее</button>
          </div>
        </div>
      </div>
      <div class="product-card-handler" data-sort="StandartWE" data-desc="StandartWE">
        <div class="product-card">
          <img src="images/standart-white.png" alt="Наименование товара" class="product-image" />
          <h2 class="product-info">VCPC Standart</h2>
          <h3 class="pc-edition">White Edition</h3>
          <h2 class="price-se">79 999 ₽</h2>
          <div class="button-container">
            <button class="buy-button" onclick="window.location.href = 'http://example.com';">Купить</button>
            <button class="details-button">Подробнее</button>
          </div>
        </div>
      </div>
      <div class="product-card-handler" data-sort="Super" data-desc="Super">
        <div class="product-card">
          <img src="images/super.png" alt="Наименование товара" class="product-image" />
          <h2 class="product-info">VCPC Super</h2>
          <h2 class="product-info">124 999 ₽</h2>
          <div class="button-container">
            <button class="buy-button" onclick="window.location.href = 'http://example.com';">Купить</button>
            <button class="details-button">Подробнее</button>
          </div>
        </div>
      </div>
      <div class="product-card-handler" data-sort="SuperWE" data-desc="SuperWE">
        <div class="product-card">
          <img src="images/super-white.png" alt="Наименование товара" class="product-image" />
          <h2 class="product-info">VCPC Super</h2>
          <h3 class="pc-edition">White Edition</h3>
          <h2 class="price-se">124 999 ₽</h2>
          <div class="button-container">
            <button class="buy-button" onclick="window.location.href = 'http://example.com';">Купить</button>
            <button class="details-button">Подробнее</button>
          </div>
        </div>
      </div>
      <div class="product-card-handler" data-sort="Ultima" data-desc="Ultima">
        <div class="product-card">
          <img src="images/ultima.jpg" alt="Наименование товара" class="product-image" />
          <h2 class="product-info">VCPC Ultima</h2>
          <h2 class="product-info">259 999 ₽</h2>
          <div class="button-container">
            <button class="buy-button" onclick="window.location.href = 'http://example.com';">Купить</button>
            <button class="details-button">Подробнее</button>
          </div>
        </div>
      </div>
      <div class="product-card-handler" data-sort="UltimaWE" data-desc="UltimaWE">
        <div class="product-card">
          <img src="images/ultima-white.png" alt="Наименование товара" class="product-image" />
          <h2 class="product-info">VCPC Ultima</h2>
          <h3 class="pc-edition">White Edition</h3>
          <h2 class="price-se">264 999 ₽</h2>
          <div class="button-container">
            <button class="buy-button" onclick="window.location.href = 'http://example.com';">Купить</button>
            <button class="details-button">Подробнее</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

Добавьте top:15px или своё число на выбор

БЛОГ НА HUSL

Не работает свойство в CSS position: sticky

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