Не работают встроенные в пост или в страницу стили

Тема в разделе "Ошибки и их решения", создана пользователем msgor86, 16 авг 2024.

  1. msgor86

    msgor86 Новичок

    Сообщения:
    5
    Симпатии:
    0
    Добрый день. Прошу помочь.

    Пытаюсь встроить простой код с элементами sticky в главную страницу или на любую страницу вообще.

    <div class="card-container">
    <div class="scroll-card" id="card1">
    <h2>Card 1</h2>
    </div>
    <div class="scroll-card" id="card2">
    <h2>Card 2</h2>
    </div>
    <div class="scroll-card" id="card3">
    <h2>Card 3</h2>
    </div>
    </div>
    <style>
    .card-container {
    padding: 20px;
    position: relative;
    }
    .scroll-card {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
    border-radius: 150px;
    transition: transform 0.3s ease;
    }
    .scroll-card h2 {
    top: 20px;
    left: 20px;
    color: #000000;
    position:absolute;
    }
    #card1 {
    background-color: #ff6347;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index:0;
    }
    #card2 {
    background-color: #4682b4;
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    z-index:1;
    }
    #card3 {
    background-color: #32cd32;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    z-index:2;
    }
    </style>

    Всё просто, карточки складываются при помощи sticky от верха страницы, но на фронтенде ничего не происходит. Тестировал код на Codepen там работает, даже в html редакторе opencart при добавлении кода работает, а после сохранения на странице нет. Подскажите куда копать? Никакого кеша нет.

    сайт: https://purestone-diamond.com
     

    Вложения:

  2. msgor86

    msgor86 Новичок

    Сообщения:
    5
    Симпатии:
    0
    Ребята, ни одного предположения?
     
  3. Tom

    Tom Специалист

    Сообщения:
    848
    Симпатии:
    292
    Не помогает никто из за скудного описания.
    Вы где то нашли кусок кода. Который там где был взят , работает.
    Внедрили у себя и он не производит нужного эффекта.
    Здесь же варианты разные
    Ваши стили основные в магазине, имеют приоритет . Верстка использует некие схожие классы, которые уже используются. Итд итп.
    Видимо более верно было озвучить замысел и привести пример того, где это работает.
     
  4. msgor86

    msgor86 Новичок

    Сообщения:
    5
    Симпатии:
    0
    Этот код написал я, классы не повторяются, если зайдёте в консоль разработчика на сайте, то увидите, что всё корректно со стилями. Смысл в том, что при скроллинге карточки собираются в колоду при помощи sticky https://codepen.io/msgor86/pen/ExBQVBo. Проблема в том, что эти стили, а конкретно sticky не отрабатывается на фронтенде. Прикрепил скрин где он корректно работает даже в визуальном редакторе, а на фронте нет. Причём не важно где я его размещаю: в описании товара, на странице, в модуле, где угодно. Никакие кеши на сайте не используются
     

    Вложения:

  5. Tesloz

    Tesloz Специалист

    Сообщения:
    95
    Симпатии:
    49
    Проверьте, что ни один из родительских классов выше в дереве DOM не имеет overflow:hidden;
    Чуть позже с компа посмотрю.
     
  6. msgor86

    msgor86 Новичок

    Сообщения:
    5
    Симпатии:
    0
    cm_block_wrapper имеет, но если убрать то не помогает(
     
  7. msgor86

    msgor86 Новичок

    Сообщения:
    5
    Симпатии:
    0
    нашёл, у ещё более верхнего узла был hidden, заработало, спасибо огромное!