Проблема с переполнением и Z-индексом

Всплывающее окно отстает от родительского подразделения в случае переполнения

<div class = "layout">
    <div class = "abc">
        <div ng-show = "items" ng-repeat = "item in items" class = "pqr">
            <div class = "item-class">
               <!-- ...some data... -->
               <span>{{item.name}}</span>
            </div>
        </div>
        <div class = "pqr">
            <div class = "item-class dropdown-toggle" data-toggle = "dropdown"> 
                 <span class = "glyphicon glyphicon-plus"></span> 
            </div> 
            <ul class = "add-menu dropdown-menu" role = "menu">
                <li>
                    <a ng-click = "addItem1()">&nbsp;Add type 1</a>
                </li>
                <li>
                    <a ng-click = "addItem2()">&nbsp;Add type 2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

css

.layout{
    overflow-y: auto;
}
.abc {
    height: 600px;
    width: 200px;
    display: table-cell;
}
.pqr {
    height: 30px;
    width: 30px;
}

Когда в контейнер макета будет добавлено больше элементов, он даст нам прокрутку в вертикальном направлении. Но в случае, если происходит переполнение и значок добавления находится в правом углу, при наведении курсора на значок «плюс» справа отобразится раскрывающееся меню в виде всплывающего окна. Но половина всплывающего окна будет позади родительских разделов, это происходит только в случае переполнения, в противном случае всплывающее окно отображается поверх всех элементов,

Код не 100%, но добавлены существенные части кода. Пожалуйста помоги