How to make a div overlap other divs?

Question

The content under the search bar is intended to display after the user enters any text. Nowadays, style comes down to what I'm aiming for.

However, when I show the search results, it places the container in the search bar, as shown in the picture:

What can I do to make the search results appear and simply overlap everything below it without clicking other elements down?

Here is my HTML:

<div id="search-bar" class="box">
    <h1 class="horizontal-header">SEARCH THE DATABASE</h1>
    <div id="search-wrapper">
        <input name="query" id="name" class="big-search" placeholder="champion, item, spells..." />
        <div id="search-results">
            <a href="#">
                <div class="item">
                    <img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
                    <div class="info">
                        <p class="name">Jax</p>
                        <p class="description">Champion</p>
                    </div>
                </div>
            </a>
            <a href="#">
                <div class="item">
                    <img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
                    <div class="info">
                        <p class="name">Jax</p>
                        <p class="description">Champion</p>
                    </div>
                </div>
            </a>
            <a href="#">
                <div class="item">
                    <img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
                    <div class="info">
                        <p class="name">Jax</p>
                        <p class="description">Champion</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

And my CSS ( written with LESS ):

  #search-bar {
        width: 636px;
        height: 35px;

        #search-wrapper {
            float:left;
            margin-left: 13px;

            #search-results {
                z-index:999;
                position:relative;


                a {
                    display:block;

                    .item:hover {
                        background-color:#282828;
                    }

                    .item {
                        overflow: hidden;
                        background-color: #171717;
                        padding: 2px;
                        cursor:pointer;
                        margin-bottom:1px;

                        img {
                            float: left;
                            width: 35px;
                        }

                        .info {
                            float: left;
                            margin-left: 8px;

                            .name {
                                color: white;
                                margin: 0;
                            }

                            .description {
                                color: white;
                                margin: 0;
                            }
                        }
                    }
                }                   
            }
        }
    }

Answer 1

CSS . , (.. .)

, , , - , ( ), position:relative;

: http://www.w3schools.com/css/css_positioning.asp

Answer 2

position:absolute .item DIV. :

 .item {
 position:absolute;
}