Позиция Sticky не работает (внутри Flexbox)

Я уже пытался использовать align-self: flex-start, но ничего не вышло. У меня есть основной гибкий контейнер справа от моей страницы (flex-direction: столбец), и теперь я хочу, чтобы один блок моих гибких столбцов был липким, когда я прокручивал их вниз. Я обернул контейнер вокруг гибких столбцов, которые хочу сделать липкими, и присвоил этому контейнеру положение липкого. Я просто опубликую фрагмент своего HTML и CSS, чтобы код не стал слишком длинным. Я прокомментировал рядом с кодом, где находятся мои столбцы и что делает каждый контейнер:

.rightside_container {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 60px;
  right: 17%;
  position: absolute;
  z-index: 0;
  border-radius: 10px;
  background-color: black;
  padding-left: 0px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.sticky_container {
  border: 1px solid white;
  position: sticky;
  top: 0px;
}

<div class = "rightside_container">
  <!--big main container-->
  <div class = "sticky_container">
    <!--since I want a few of my columns to be sticky, I wrapped
            a little div container around them which I gave the position sticky-->

    <div class = "follow_flex">
      <!--COLUMN 1-->
      <div class = "follow_pic_container">
        <img src = "thumbnails/twitterlogo.jpg" class = "follow_pic">
      </div>
      <div class = "follow_text_container">
        <div class = "follow_name">Twitter</div>
        <div class = "follow_at">@Twitter</div>
      </div>
      <div class = "follow_button_container">
        <button class = "follow_button">Follow</button>
      </div>
    </div>

    <div class = "follow_flex">
      <!--COLUMN 2-->
      <div class = "follow_pic_container">
        <img src = "thumbnails/youtubelogo.jpg" class = "follow_pic">
      </div>
      <div class = "follow_text_container">
        <div class = "follow_name">YouTube</div>
        <div class = "follow_at">@YouTube</div>
      </div>
      <div class = "follow_button_container">
        <button class = "follow_button">Follow</button>
      </div>
    </div>
  </div>
</div>

html css flexbox

11.10.2022 01:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что части кода, которую вы предоставляете, недостаточно, но в вашем фрагменте, если вы установите высоту (для целей тестирования) и удалите поле, это создаст липкий эффект. Вы должны учитывать, что если у вас есть родитель с overflow: hidden липкой позицией, это не сработает.

.rightside_container {
    display: flex;
    flex-direction: column;
    gap: 0px;
    right: 17%;
    position: absolute;
    z-index: 0;
    border-radius: 10px;
    background-color: black;
    padding-left: 0px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    height: 600px;
    
}

.sticky_container {
    border: 1px solid white;
    position: sticky;
    top: 0px;
    
}

            
        <div class = "rightside_container"> <!--big main container-->
          <div class = "sticky_container"> <!--since I want a few of my columns to be sticky, I wrapped
            a little div container around them which I gave the position sticky-->
          
              <div class = "follow_flex"> <!--COLUMN 1-->         
                  <div class = "follow_pic_container">
                      <img src = "thumbnails/twitterlogo.jpg" class = "follow_pic">
                  </div>
                  <div class = "follow_text_container">
                      <div class = "follow_name">Twitter</div>
                      <div class = "follow_at">@Twitter</div>
                  </div>
                  <div class = "follow_button_container">
                      <button class = "follow_button">Follow</button>
                  </div>               
              </div>

              <div class = "follow_flex"> <!--COLUMN 2-->
                  <div class = "follow_pic_container">
                      <img src = "thumbnails/youtubelogo.jpg" class = "follow_pic">
                  </div>
                  <div class = "follow_text_container">
                      <div class = "follow_name">YouTube</div>
                      <div class = "follow_at">@YouTube</div>
                  </div>
                  <div class = "follow_button_container">
                      <button class = "follow_button">Follow</button>
                  </div>
              </div>
            </div>
        </div>

Я попробую это, спасибо. Скрытого переполнения нигде нет в моем коде. Это значение по умолчанию, которое мне нужно как-то изменить?

— 11.10.2022 03:25

11.10.2022 02:40