My position: sticky doens't work

JavaScript
1

I’m trying to make that the “sideSearch” appear meanwhile i scroll to down throught the page. I try diferrents stuffs but i don’t know what i doing wrong. Remenber is React.jsx page.

import React from 'react'
import Card from '../Card'
import database from '../database'
import './Products.css'


 function Products(){

   const cards = database.map(item => {
    return (
        <Card key={item.id}
        {...item}
    />
        )  
   })

    return(
        
        <div className='backgroundProducts' style={{backgroundColor: "  #732C7B"}}>
         
        <div className="cardSection">
            
        <div className="sideSearch">
        <form >
        <input type="search" className="search" placeholder='search' />
                
        <p>filter by type card</p>
        <ul className='filter'>
                    <li>Monster</li>
                    <li>Spell</li>
                    <li>Trap</li>
        </ul>
        <input type="range" className="price-filter" min={0}  max={40}  />
        <p className="priceValue">Value: $</p>
        </form>
      </div>
         <div className="content">
        {cards}
        </div>
        </div>
        </div>
       
    )
}
export default Products

Products.css


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto&display=swap');



.backgroundProducts{
 color: #BDAEC6;
 font-family: 'Roboto', sans-serif;
 letter-spacing: 0;
text-transform: capitalize;
}

.content{
    display: flex;
    flex-wrap: wrap;
    
}

.cardSection{
    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, auto) ;
   
}
.cardProduct{
display: flex;
flex-direction: column;
width: 185px;
text-align: center;
margin: 10px
}

.price{
    font-weight: bold;
}

.sideSearch{
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: rgb(255, 255, 255, 0.1);
    padding: 20px;
    margin: 10px;
    height: 100%;
    position: sticky;
    top: 0;
    z-index: 1;
}
 form{
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   margin-top: -10px
  
 }

.filter > li{
    cursor: pointer;
    transition: all 0.3s linear;
}

.filter > li:hover{
   color: #421C52
}
   
.search{
    padding: 8px 6px;
    border: none;
    border-radius: 6px;
   background-color: #421C52;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 10px;
    color: #BDAEC6;
   }

  

.search:active{
    border: 1px solid black;

}
2

Please post a link to your full project code to make it easier to test your project.

Thank you.

3

If you move the sticky elements out of the containers they are inside it should work (the offset is relative to its nearest scrolling ancestor/containing block).

It should also work as is if you use position fixed but that will require some more CSS to have the same layout (because the element is now out of flow).