position absolute и скролл родителя

Доброго всем времени суток, столкнулся с неожиданной для себя проблемой, хотелось бы понять причины такого поведения.

На сайте есть бутстрап табы,

.nav-tabs {
margin-bottom: 19px;
border: 0;
width: 100%;
position: relative;
overflow-y: auto;
white-space: nowrap;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;}

как можно увидеть табы прокручиваются при большом количестве контента, и в связи с этим я захотел добавить блюр по правому краю

.nav-tabs:before {
content: "";
position: absolute;
width: 10%;
right: 0;
height: 80px;
top: -33px;
z-index: 2;
background: linear-gradient(to right, transparent 1%, transparent 10%,#ffffff 100%);}

но неожиданно данный элемент стал прокручиваться вместе с остальным содержимым табов

подскажите пожалуйста, что я упускаю? с css увы знаком не столь сильно как хотелось бы