position absolute element is underneath other element
im trying to create a dropdown component in react,
the dropdown whose position is relative has a button and a div which is position absolute but the position absolute element is cropped by container of the dropdown component
this is the contaier of the "<DropDown />"
and this is the dropdown component
the dropdown whose position is relative has a button and a div which is position absolute but the position absolute element is cropped by container of the dropdown component
<section className={styles.SnScontainer}>
<div className={styles.searchBoxContainer}>
<div className={styles.searchBox}>
<img src={search} alt='search' />
<input type='text' placeholder='Search by Product Name' />
</div>
</div>
<div className={styles.sortBox}>
<div className={styles.sortOptionsContainer}>
<button
onClick={() => {
setView("grid");
}}
className={`material-symbols-outlined ${gridView ? styles.filled : styles.unfilled} `}>
grid_view
</button>
<button
onClick={() => {
setView("list");
}}
className={`material-symbols-outlined ${gridView ? styles.unfilled : styles.filled} `}>
view_list
</button>
<DropDown name={"Headphone type"} />
<DropDown name={"Company"} />
<DropDown name={"Colour"} />
<DropDown name={"Price"} />
</div>
</div>
</section><section className={styles.SnScontainer}>
<div className={styles.searchBoxContainer}>
<div className={styles.searchBox}>
<img src={search} alt='search' />
<input type='text' placeholder='Search by Product Name' />
</div>
</div>
<div className={styles.sortBox}>
<div className={styles.sortOptionsContainer}>
<button
onClick={() => {
setView("grid");
}}
className={`material-symbols-outlined ${gridView ? styles.filled : styles.unfilled} `}>
grid_view
</button>
<button
onClick={() => {
setView("list");
}}
className={`material-symbols-outlined ${gridView ? styles.unfilled : styles.filled} `}>
view_list
</button>
<DropDown name={"Headphone type"} />
<DropDown name={"Company"} />
<DropDown name={"Colour"} />
<DropDown name={"Price"} />
</div>
</div>
</section>this is the contaier of the "<DropDown />"
<div className={styles.dropDown}>
<button
onFocus={() => {
setIsOpen(true);
}}
onBlur={() => {
setIsOpen(false);
}}
className={styles.dropdownButtons}>
{name} <span className='material-symbols-outlined'>expand_more</span>
</button>
{isOpen ? (
<div open={isOpen} className={styles.dropDownMenu}>
<ul className={styles.dropDownList}>
{dropDownData && dropDownData.map((option, key) => <li key={key}>{option}</li>)}
</ul>
</div>
) : null}
</div> <div className={styles.dropDown}>
<button
onFocus={() => {
setIsOpen(true);
}}
onBlur={() => {
setIsOpen(false);
}}
className={styles.dropdownButtons}>
{name} <span className='material-symbols-outlined'>expand_more</span>
</button>
{isOpen ? (
<div open={isOpen} className={styles.dropDownMenu}>
<ul className={styles.dropDownList}>
{dropDownData && dropDownData.map((option, key) => <li key={key}>{option}</li>)}
</ul>
</div>
) : null}
</div>and this is the dropdown component
