CODEWITHSUNDEEP
htmlcss
Only Bolivian Here
Only Bolivian Here

Reputation: 36733

How to make a div overlap other divs?

The contents below the search bar are meant to be shown after the users enter some text. Currently the style is down to what I'm aiming for.

However when I display the search results, it pushes the container following the search bar, as illustrated by my picture:

enter image description here

What can I do that the search results display and just overlap everything below it without pushing other elements downwards?

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;
                            }
                        }
                    }
                }                   
            }
        }
    }

Upvotes: 5

Views: 44081

Answers (2)

sandeep
sandeep

Reputation: 92803

Give position:absolute to your .item DIV. Write like this:

 .item {
 position:absolute;
}

Upvotes: 6

Dave
Dave

Reputation: 29121

Use CSS's Absolute Positioning. Unlike Relative Positioning, Absolute Positioning removes the item from the flow of the document (ie keeping it from pushing other things down.)

Just remember, something that's absolutely positioned is positioned relative to it's nearest positioned parent - so whatever container the absolute positioned items are in (in your case) should be set to position:relative;

Info on all kinds of positioning: http://www.w3schools.com/css/css_positioning.asp

Upvotes: 8

Related Questions