Размещение абсолютного позади относительного позиционного элемента

У меня есть два элемента в одном контейнере, первый имеет position: absolute, второй position: relative. Есть ли способ установить "z-index" абсолютного элемента, чтобы его в фоновом режиме? Относительный позиционный элемент должен быть сверху (z-слой), потому что он содержит ссылки...

Вот JSFiddle: http://jsfiddle.net/8eLJz/

Абсолютно расположенный элемент находится на верхней части z-слоя, и я не влияю на z-index -property. Что я могу сделать?

Ответы

Ответ 1

Я не уверен, какой из них вы хотите впереди, но вам просто нужно установить положение на обоих и установить z-index для обоих. http://jsfiddle.net/8eLJz/2/

a {
    color: black;
}

nav#mainNav {
    position: relative;
}

nav#mainNav > img {
    position: absolute;
    width: 100px;
    left: 0;
    z-index: 5;
}

nav#mainNav > a > img {
    width: 100%;
}

nav#mainNav > nav {
    width: 100%;
    position: relative;
    z-index: 10;
}

nav#mainNav > nav > a {
    display: block;
    text-align: right;
    background-color: yellow;
}

Ответ 3

CSS имеет свойство z-index, поэтому на вашем селекторе nav#mainNav > img просто установите z-index: -1;. Вот рабочий jsFiddle: http://jsfiddle.net/8eLJz/1/