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

Question

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

<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%, но добавлены необходимые частикода.Пожалуйста, помогите