0

解決策を探してみましたが、いくつかあるようですが、うまくいかないようです。どんなアイデアでも大歓迎です。

背景 ( ) として使用される div コンテナー (中央) に 3 つの div がありz-index : -10;ます。z-index : 5;以前のものの上に別の div (別のコンテナになります) をフロートしたいと思います。

以下の HTML:

<div class="div-backall ">
<div class="div-backtop">
        <p>1111</p>
    </div>
<div class="div-backmid">
        <p>2222</p>
    </div>
<div class="div-backbottom ">
        <p>3333</p>
    </div>
</div>
<div class="div-main">
    <p>Main text goes here</p>
</div>

以下のCSS：

.div-backall {
    width: 90%;
    height: 100%;
    z-index : 1;
    margin-left : auto;
    margin-right : auto;
    position : absolute;
}
.div-backtop {
    width: 90%;
    height: 20%;
    background-color: #D8E4F8;
    margin: -5px 0 0 0;
    position : absolute;
    margin-left : 5%;
    margin-right : 5%;          
}
.div-backmid {
    width: 90%;
    height: 75%;
    background-color: #F1EFE2;
    margin: 14% 0 0 0;
    position : absolute;
    margin-left : 5%;
    margin-right : 5%;      
}
.div-backbottom {
    width: 90%;
    height: 5%;
    background-color: #D8E4F8;
    margin: 70% 0 0 0;
    text-align: center;
    position : absolute;
    margin-left : 5%;
    margin-right : 5%;  
}

.div-main{
    width: 70%;
    height: 85%;
    background-color: #FFFFFF;
    margin-left : 10%;
    margin-right : 10%;
    text-align: center;
    z-index : 2;
    border : thin solid Black;
    position : absolute;
    margin-top : 5%; 
    border-radius: 5px;
}

を使用してフローティング効果を得ることができますmargin-top : -800px;が、それはばかげた解決策です。また、後者を中心にすることはできません。CSSのみでこれは可能ですか？js ソリューションに目を向けましょうか。

ありがとう、リー

4

3 に答える 3

1

z-indexを使用するには、相対位置がz-indexをサポートしていないため、すべてのdivに絶対位置を使用する必要があります。

于 2012-06-13T05:37:53.530 に答える
1

z-indexは position でのみ機能しrelative, absolute & fixedます。次のように書きます。

    .div-backtop,
    .div-backbottom,
    .div-main{
     position:relative;
    }
   .div-backtop{
     z-index:1;
    }
   .div-main{
     z-index:2;
   }
于 2012-06-13T05:24:47.080 に答える
0

出力がどのようになるかを確認してください。私はあなたの問題に答えを与える方法をすることができません...私は私が1つの解決策を与えたことを理解しているので..あなたがこれから得られることを願っています

margin-top : -700px;
    position:relative;

これに変更を加えてください

.div-main{
    width: 70%;
    height: 85%;
    background-color: #FFFFFF;
    margin-left : 10%;
    z-index : 5;
    border : thin solid Black;
    position : relativ;
    margin-top : -700px;
    border-radius: 5px;
}
于 2012-06-13T05:30:55.937 に答える