Soy una biblioteca de reacción multicarrusel e hice botones personalizados para ella, pero no puedo encontrar una forma de hacer botones en la parte superior del carrusel, sino que está en la parte inferior de forma predeterminada y la posición absoluta simplemente desordena todo en diferentes pantallas.

 const CustomButtonGroup = ({ next, previous }: any) => { return ( <ButtonContainer> <div className="container-for-container"> <section className="third-container"> <div className="sidebar-buttons-container"> <button className="left" type="button" onClick={() => previous()}> <SVGIconButtonArrow /> </button> <div className="slash">/</div> <button className="right" type="button" onClick={() => next()}> <SVGIconButtonArrow className="arrow-right" /> </button> </div> </section> </div> </ButtonContainer> ); }; export { CustomButtonGroup }; const ButtonContainer = styled.div` .container-for-container { /* position: relative; */ position: relative; height: 100px; border: 3px solid #73ad21; } .third-container { /* position: absolute; top: 51.4rem; left: 65rem; */ position: absolute; right: 0; width: 200px; border: 3px solid #73ad21; .sidebar-buttons-container { display: flex; margin-left: 25px; button { border: none; background-color: rgba(0, 0, 0, 0); color: ${({ theme }) => theme.colors.black000}; font-weight: bold; font-size: 40px; z-index: 33; cursor: pointer; } .arrow-right { transform: rotate(180deg); } .slash { font-weight: 100; font-size: 40px; margin-top: 20px; } .left { padding-right: 20px; } .right { padding-left: 20px; } .left:active { transform: translateX(-4px); } .right:active { transform: translateX(4px); } } } /* ${med.xs} { top: 47.2rem; left: 12rem; } ${med.sm} { top: 46.3rem; left: 20rem; } ${med.custom({ min: 556, max: 1022 })} { top: 45.1rem; left: 32rem; } ${med.custom({ min: 1023, max: 1600 })} { top: 52.1rem; left: 78rem; } */ `;

creo que solo puede pasar estos botones para el componente carrusel para que funcionen si los coloca encima del carrusel, no funcionarán