在做搜索框的时候打算用position:absolute;将按钮放在input框上，但是IE9和IE8中，按钮始终被input压在后面。
效果图
HTML结构如下：
<div class="sidebar-search" id="siderbar-search">
<input type="text" placeholder="功能搜索" id="sidebarSearchInput" onkeypress="sidebarSearchKeypress();"/>
<span class="sidebarSearchBtn" onclick="sidebarSearch(event);" id="sidebarSearchBtn"></span>
<div class="dropdown-menu"><ul></ul></div>
</div>
CSS：
.sidebar-search {
margin: 5px;
position: relative;
}
.sidebar-search input[type="text"] {
border: 0;
width: 100%;
box-sizing: border-box;
font-size: 13px;
outline: none;
background: #fff url(../img/5.png) 98% center no-repeat;
padding-right: 28px;
}
.sidebarSearchBtn {
position: absolute;
width: 28px;
height: 30px;
background: transparent;
right: 5px;
top: 5px;
z-index: 10;
cursor: pointer;
}
解决办法：
1. 给按钮加个背景，比如：background: #fff;(background:transparent;无效)
2. 将.sidebar-search input的背景放到外层div上（.sidebar-search），给input设置小一点的宽度，给按钮留出位置。
.sidebar-search {
margin: 5px;
position: relative;
background: #fff url(../img/5.png) 98% center no-repeat;
border: 1px solid #d5d5d5;
}
.sidebar-search input[type="text"] {
border: 0;
width: 172px;
box-sizing: border-box;
font-size: 13px;
outline: none;
}
.sidebarSearchBtn {
position: absolute;
width: 28px;
height: 30px;
background: transparent;
right: 0px;
top: 0px;
z-index: 10;
cursor: pointer;
}
