“无依赖绝对定位”与下拉列表定位

HTML

<div class="search-box">
    <input class="search-input" placeholder="搜索"><a href="javascript:" class="search-btn">搜索</a>
    <div class="search-result">
        <div class="search-datalist">
            <a href>搜索结果1</a>
            <a href>搜索结果2</a>
            <a href>搜索结果3</a>
            <a href>搜索结果4</a>
            <a href>搜索结果5</a>
        </div>
    </div>
</div>
					    

CSS

.search-box {
    display: inline-block;
    white-space: nowrap;
}
.search-input { width: 200px; height: 20px; line-height: 20px; margin: 0; padding: 9px 39px 9px 9px; border: 1px solid #ddd; transition: border-color .15s; }
.search-input:focus { outline: none; border-color: #2ea7e0; }
.search-btn { width: 20px; height: 20px; border: 9px solid #fff; background: #ddd url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPdJREFUeNpi+k9lwMRAZYDLwCNAHAnEMkDMDqUjoeL4AZqLfwNxFhAz4MEg+V+4vIxuYApUjBOIG4H4DhD/hNKNUHEGqDqCBh6B8rmA+CgO9Ueh8gxQ9XgjZSqUrgBiKxwhBBIvg7KnEApDcajNdwikjLtQdVKEXPgSSssSiEcZKP2KULIRh9KPCRj4FEqLEjLQEUovJ2DgYihtRygMD5MYy4eJSYfZRKZDEE4C4n+EDPxFRE5hwGcoAw6vgbwTAU0azFA6BohPQQ3BaSgDGSXUXyyG5lNiIDZDhWESLBQUe7OBmA+IFwBxMUyCEexMOhSwZAOAAAMAVJM+EQ2rrOoAAAAASUVORK5CYII=) no-repeat center; text-indent: -9em; position: absolute; margin: 1px 0 0 -40px; transition: background-color .15s; overflow: hidden; }
.search-input:focus ~ .search-btn { background-color: #2ea7e0; }

.search-datalist { position: absolute; width: 248px; border: 1px solid #e6e8e9; background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; text-align: left; z-index: 1; }
.search-datalist a { display: block; line-height: 36px; padding-left: 12px; color: #5e5e5e; text-decoration: none; }
.search-datalist a:hover { color: #000; background-color: #f9f9f9; }

.search-result {
    display: none;
}
.search-input:focus ~ .search-result {
    display: block;
}
					    

JS

//no