Наложение div на другой div

Question

Я пытался найти предложения, найденные здесь (либо с использованием отрицательного поля на полях, либо с помощью position: aboslute) для наложения div на другой div, и он отлично работал в других случаях.Но по некоторым причинам это сейчас не сработает.

Вот мой HTML:

       <div id="header" class="lightgradient">

            <div id="headerContent" class="container">

                <div id="logo" class="span-6">

                    <a href="/">

                        <img src="/images/logo.png" width="230" height="62" />

                    </a>

                </div>

                <div id="menucontainer" class="span-14"><ul id="menu"><li>

<a href='/Services/Index'>TJ&#196;NSTER</a></li>

<li>

<a href='/About/References'>KUNDER</a></li>

<li>

<a href='/About'>OM OSS</a></li>

<li>

<a href='/About/Contact'>KONTAKT</a></li>

</ul></div>

                <div id="logindisplay" class="span-2">

                        <a href="/Account/LogOn">Logga in</a>



                </div>

            </div>

        </div>



    <div class="banner">

        <div class="container white">

            <div class="span-12">
[etc...]

Я хочу, чтобы логотип располагался над «баннером».

Iпробовал это например:

#logo
{
    float: left;
    height: 70px;
    padding: 10px 10px 0px 10px;
    position: relative;
    margin-bottom: -40px;
    z-index: 40;
}

Но это не сработает.Он отлично перемещает изображение div и логотипа, но изображение скрыто под баннером, хотя я установил высокий z-индекс, а также внутри панели поиска есть полоса прокрутки, которая содержит логотип ...

Как сделать так, чтобы изображение лежало поверх баннера, и как избавиться от полосы прокрутки?

РЕДАКТИРОВАТЬ:

Вот и баннер css:

.banner
{
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70b8ea', endColorstr='#2c6dc3'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#70b8ea), to(#2c6dc3)); 
    background: -moz-linear-gradient(top,  #70b8ea,  #2c6dc3);
    border-bottom:2px solid #fff;
    border-top: 1px solid white;
    padding: 20px;
}

Answer 1

Ваша разметка не позволит использовать трюк margin-bottom, поскольку ваш #logo div вложен в другой набор элементов.

Вам придется расположить логотип абсолютно и расположить его относительнок родительскому элементу, который охватывает как #logo div, так и .banner div.

http://jsfiddle.net/DOSBeats/NXgq6/

Вот пример использования position:absolute.В этом примере я не использовал position:relative для родительского элемента, но если вы используете систему сетки, я бы проверил, чтобы убедиться, что у основного .row или .container-(12||16) установлено свойство position:relative.

Это обеспечит центрирование любого left:15px; top:25px; с остальным содержимым.

РЕДАКТИРОВАТЬ:

После просмотра вашего кода, вот как вам нужно обновить CSS / HTML.

1. Удалите все ссылки на position:relative из #header и #headerContent
2. После вашего #wrap div вам нужно будет добавить еще один <div class="container"> и закрыть егонепосредственно перед </div>, закрывающим элемент #wrap.
3. Измените overflow:auto на overflow:hidden на элементе #headerContent, чтобы избавиться от полос прокрутки в крайнем правом положении.