I have the element UI where i am using the carousel. The Problem right now is the arrows are coming inside or cutting from the sides

i tried adding the div around the buttons like this

<div class="arrowLeft"><button type="button" class="el-carousel__arrow el-carousel__arrow--left" style=""><i class="el-icon-arrow-left"></i></button></div>

the css of the above arrow is:

.arrowLeft {
  z-index: 999;
  position: fixed;

in firefox, i am able to see the arrow outside

https://prnt.sc/2uIH99dyTaR1

but it on the top but in chrome, it is showing like this

https://prnt.sc/Q-698jcYqTSe but no exactly in middle

in IE, it is like this

https://prnt.sc/GJT5pvESW2Wn

not sure if i use position fixed or not, but i am not 100% confident, on mobile or ipad browsers how it will behave

position the fixed will create problems.

this class el-carousel__arrow el-carousel__arrow--left has the position of absolute: