html - ul renders below the div containing them -

how put ul above div? tried adding z-index or modify position attribute, neither worked.

div code:

.wrapper-dropdown-4 {     position: relative;     width: 368px;     margin: 0 auto;     padding: 7px 10px 5px 10px;     font-size:12px;     background: #fff;     border: 1px solid #ccc;     border-radius:4px;     cursor: pointer;     outline: none;     z-index:50; } 

ul code:

.wrapper-dropdown-4 .dropdown {     position: absolute;     top: 100%;     margin-top: 1px;     left: -1px;     right: -1px;     background: white;     border: inherit;     border-top: none;     list-style: none;     display: none;     pointer-events:visiblefill; } 

ul code when div active:

.wrapper-dropdown-4.active ul {     overflow-y:auto;     max-height: 185px;     display: block;     pointer-events: visiblefill; } 

html code:

<div class="wrapper-dropdown-4">     <p></p>     <ul class="dropdown">         <li></li>     </ul> </div> 

the ul element renders below div when div containing them active. how put ul above div?

.wrapper-dropdown-4.active {     z-index:100; } 

this code solved question.