5

検索バーの下のコンテンツは、ユーザーがテキストを入力した後に表示されることを意図しています。現在、スタイルは私が目指しているものにダウンしています。

ただし、検索結果を表示すると、私の写真に示すように、検索バーに続いてコンテナーがプッシュされます。

ここに画像の説明を入力

検索結果が表示され、他の要素が下に押し出されることなく、その下のすべてが重なるようにするにはどうすればよいですか?

ここに私の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>

そして私のCSS（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;
                            }
                        }
                    }
                }                   
            }
        }
    }
4

2 に答える 2

8

CSSの絶対ポジショニングを使用します。相対ポジショニングとは異なり、絶対ポジショニングはドキュメントのフローからアイテムを削除します（つまり、他のものを押し下げないようにします）。

絶対位置にあるものは、最も近い位置にある親を基準にして配置されることを覚えておいてください。したがって、絶対位置にあるアイテムが入っているコンテナ（この場合）は、次のように設定する必要があります。position:relative;

あらゆる種類のポジショニングに関する情報： http ：//www.w3schools.com/css/css_positioning.asp

于 2012-04-10T13:18:16.023 に答える
6

position:absoluteあなたの.itemDIVに与えます。このように書いてください：

 .item {
 position:absolute;
}
于 2012-04-10T13:18:37.723 に答える