0

背景や絶対位置なしで、ある div を他の div の上に置くことは可能ですか? これはレスポンシブ デザインを簡略化したものです。内容は幅%で変わります。この場合、絶対配置は使えないと思いますか？他のトランスの上にdivを配置する方法はありますか?

ここでは相対位置を使用していますが、z-index は機能していないようです。私はなぜなのか理解していない？

再生する例は次のとおりです: http://jsfiddle.net/WMXMW/1/

CSS:

#content{
    margin:0 auto;
    width:40%;
    overflow:hidden; /* a way of clearing float */
    text-align:center;
}

#text{
    margin:0 auto;
    text-align:justify;
}

#menuTrans{
    position:relative;
    margin:0 auto;
    z-index:1;
    display:inline-block;
}
#blueTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    z-index:0;
    background:blue;
}
#redTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    z-index:0;
    background:red;
}



#menu{
    margin:0 auto;
    z-index:0;
    display:inline-block;
}
#blue{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:blue;
}
#red{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:red;
}

HTML:

<div id="content">
    <div id="text"> 
        some text some text some text  
        some text some text some text
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
    </div>   
    <div id="menu"> 
        <div id="red"> </div>
        <div id="blue"> </div>
    </div>

    <div id="menuTrans"> 
        <div id="redTrans"> </div>
        <div id="blueTrans"> </div>
    </div>
</div>
4

2 に答える 2

0

要素を配置したい場所に移動する必要があります。相対位置を使用している場合は、左に負の値を設定することでこれを行うことができます:

#menuTrans{
  position:relative;
  left: -100px;
[...]

そして、どちらが一番上にあるかを制御するには、相対位置 (または実際には静的#menu以外のもの) も指定する必要があるため、z-index が機能します。

于 2013-04-28T09:26:07.423 に答える
0

要素の幅がわかっている場合は、負のマージンを与えることができます。DOM で後から来る要素が一番上になります。

#blueTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    background:blue;
    margin-left: -50px;
}
#redTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    background:red;
    margin-left: -50px;
}

http://jsfiddle.net/WMXMW/2/

于 2013-04-28T09:20:44.683 に答える