4

コンテナは2つ。1 つは固定で、画面の 100% をカバーします。2 番目は相対的です - スクロール可能なコンテンツが含まれます。問題は、次のように相互に相対的に配置される 4 つの要素があることです: 1 番目は固定コンテナー内、2 番目は絶対的、3 番目は固定的、4 番目は絶対的です。

<div class="container fixed">
    <div class="el z1"></div>
    <div class="el z3"></div>
</div>
<div class="container relative">
    <div class="el z2"></div>
    <div class="el z4"></div>
</div>

ただし、一方の親の z-index は常に他方よりも小さいため、4 つの子要素を並べ替えることができません。

フィドルがありますhttp://jsfiddle.net/only_dimon/zkY4C/6/ 下から黄色、緑、白、黒の順番でお願いします。しかし、ご覧のとおり、黄色、白、緑、黒です。

私が望む結果：
ここに画像の説明を入力

ただし、要素は別のコンテナーにある必要があります。

前もって感謝します！

これは私に役立ちます：多くの要素では、htmlの再構築のみに役立ちます。幸いなことに、固定要素に固定コンテナーを使用する必要はありません。固定要素の位置とサイズは、ウィンドウのサイズに依存するためです。それらを相対コンテナーに配置したとしてもです。

4

2 に答える 2

0

このように: http://jsfiddle.net/9Hh89/1/ ?

ここに私のHTMLがあります：

<div class="fixed">
    <div class="yellow">
        <div class="green">
            <div class="white">
                <div class="black"></div>
            </div>            
        </div>        
    </div>
</div>

そしてCSS：

html, body { height:100% }

body { padding:0 ;
    margin:0 ;
}

.fixed { height:100% ;
    min-height:100% !important ;
    background:#666666 ;
    position:relative ;
    z-index:1 ;
}

.yellow, .green, .white, .black {
    display:block ;
    margin:auto !important ;
    position:absolute ;
    top:0 ;
    bottom: 0 ;
    right: 0 ;
    left: 0 ;
}

.yellow { width:220px ;
    height:220px ;
    background:yellow ;
    z-index:100 ;
}

.green { width:170px ;
    height:170px ;
    z-index:200 ;
    background:green ;
}

.white { width:100px ;
    height:100px ;
    z-index:200 ;
    background:white ;
}

.black { width:50px ;
    height:50px ;
    z-index:300 ;
    background:black ;
}

一番、

シンシア

于 2013-04-19T10:12:45.457 に答える