web-dev-qa-db-ja.com

相対配置要素の後ろに絶対配置

同じコンテナに2つの要素があり、最初の要素にはposition: absolute、2番目の要素にはposition: relativeがあります。バックグラウンドになるように絶対要素の「z-index」を設定する方法はありますか？リンクを保持するため、相対的な配置要素は最上部（zレイヤー）にある必要があります...

ここにJSFiddleがあります： http://jsfiddle.net/8eLJz/

絶対配置要素はzレイヤーの最上部にあり、z-index-プロパティには影響しません。私に何ができる？

htmlcss-positionz-index
31
Luca Nate Mahler

どちらを前面に表示するかはわかりませんが、両方に位置を設定し、両方に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;
}
51
2pha

http://jsfiddle.net/8eLJz/3/

nav#mainNav > img {
    z-index: -1;
}
11
isherwood

CSSにはz-indexプロパティがあるため、nav#mainNav > imgセレクターでz-index: -1;を設定するだけです。動作するjsFiddleは次のとおりです。 http://jsfiddle.net/8eLJz/1/

1
HJ05