5

HTMLで達成したい次のユースケースがあります

I've two div element with background red and blue. The blue div is added later of which a part overlaped with red div. I have the option of "send to back" which sends the selected div to back of other div. If I apply this to blue div and select blue div it should look like below image

ここに画像の説明を入力

基本的に私はの機能を模倣しようとしていArrange --> Order --> Send to backますGoogle Presentation

私はz-index成功しなかった。background-gradientの重複部分を使用できますが、blue div transparent回避したい計算がいくつか含まれます。

HTMLでこれを達成するにはどうすればよいですか?
どんな助けでも大歓迎です。

注: すべての要素divは Update を使用して配置position: absolute
されます。を選択すると、次のようになります (境界線が強調表示されています)。red divblue divz-indexblue divred div

ここに画像の説明を入力

blue divここで、重なっている部分を選択しても表示されred divません (明らかに小さいため) が、 select.it 時に表示されるようにしz-indexたいと考えています。border

4

1 に答える 1

4

あなたがコメントしたように、必要なのはこれだと思います。また、積み上げたいaclassで aを呼び出すだけです。div

最終デモ

私はあなたの質問をうまく黙らせていませんが、この方法で行うよりも、クリックしたときに要素を別の要素の上に移動したいと思います

デモ

説明：

ここで行っているのは、jQuery を使用してクリックしたものに単純に適用z-indexすることです。div

デモ 3 (質問を更新したとき)

border現在の選択をマークするために使用div

$(".wrap div").click(function(){
    $('.wrap div').removeAttr('style');
    $(this).css({"z-index":"1", "border":"1px solid #000"});
});

デモ 2

コード参照:

$(".wrap div").click(function(){
  $(this).css("z-index","1"); 
});

.wrap {
    position: relative;
}

.wrap div {
    position: absolute;
    height: 100px;
    width: 100px;
}

.wrap div:nth-of-type(1) {
    background: #f00;
    left: 10px;
}

.wrap div:nth-of-type(2) {
    background: #0f0;
    left: 80px;
}

<div class="wrap">
    <div></div>
    <div></div>
</div>
于 2013-10-11T06:24:27.657 に答える