1

ピンクと緑のレイアウトは親レイアウトです。灰色のレイアウトをクリックすると青色のレイアウトが作成されます。青のレイアウトを親レイアウト (ピンクと緑) の上に重ねて、一番上に表示したい。

ただし、青いレイアウトはピンクのレイアウトでオーバーレイされています。私はそれについて助けが必要です。

div{
    display:block;
}
#content{
    height:400px;
    width:100%;
    background-color:green;    	
}
.center{
    width:100px;
    height:100px;
    background-color:#808080;        	
    text-align: center;
    margin:auto;
}      
#foo{
    background-color:#2060ff;
    border: 1px solid #000;
    width:50px;
    height:50px;
}
<div id="content">    
    <div id="d" class="center">    
        <div class="center">
            Click here to create new blue element
        </div>    		
    </div>       
    <div style="background-color:pink;width:100%;height:20px;"></div> 	
</div>

JSFiddleをチェック

4

4 に答える 4

2

z-indexを調整する必要があります。正しく機能するには、z-index を配置する必要があります。jsfiddleを参照してください。

#foo{
    background-color:#2060ff;
    border: 1px solid #000;
    width:50px;
    height:50px;
    position:relative;
    z-index:100;
}
于 2013-09-16T16:28:04.287 に答える
2

位置決めと z-index を追加します...

#foo{
    position: relative;
    background-color:#2060ff;
    border: 1px solid #000;
    width:50px;
    height:50px;
    z-index: 1;
}

デモ

于 2013-09-16T16:28:44.537 に答える
1

絶対配置を提案できますか?

#foo{
    position:absolute; // <-- here is the change
    background-color:#2060ff;
    border: 1px solid #000;
    width:50px;
    height:50px;
}

もちろん、これはあなたの質問を正しく理解した場合です...

于 2013-09-16T16:27:15.237 に答える