在另一个绝对定位的元素上方应用可拖动容器

我有一个页面，其中包含指向其他页面的IFRAME。IFRAMES父级将包含用于更改IFRAME的URL的搜索控件。IFRAME应该始终显示最大屏幕，但是SEARCH CONTROL需要放在IFRAME结果的顶部。

我基本上希望它“永远在最前面”

我怎样才能做到这一点？

实例化，HTML看起来像：
我尝试弄乱z-index ...没有成功。

<style>
    iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; }
    .search { position: absolute; top: 0; left: 0; height: 100px; width: 100px; z-index: 100;}
</style>

<div class="search>
    This Is My SEARCH CONTROLS CONTAINER
</div>
<div class="container">
    <iframe src="~/tours/_default/index.html" allowfullscreen align="center" />
</div>