Porta in funzionalità in HTML5

Question

sto avendo il seguente caso d'uso che voglio ottenere in 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

Fondamentalmente sto cercando di Minic la funzionalità di Arrange --> Order --> Send to back di Google Presentation

Ho provato z-index senza successo. Posso usare background-gradient con la parte sovrapposta di blue div transparent ma invocherò alcuni calcoli che voglio evitare.

Come raggiungere questo in HTML?
Qualsiasi aiuto è apprezzato.

Nota: Tutti div elementi sono posizionati con position: absolute
Aggiornamento: I red div si trova sopra la blue div come z-index è superiore blue div. Quando è selezionato red div, dovrebbe apparire come sotto (con il bordo evidenziato).

Ora, se seleziono il blue div non compare una parte di esso che overlapes con red div (ovviamente dal suo z-index è minore) ma voglio la sua border di apparire quando ho select.it.

Answer 1

Come hai commentato, suppongo che ciò di cui hai bisogno è anche questo, basta chiamare uno class su un div che vuoi impilare.

Final Demo

---

Non ricevo la tua domanda tranquilla bene, ma suppongo che si desidera portare un elemento sopra un altro quando viene cliccato, di quanto si può fare in questo modo

Demo

Spiegazione:

Che cosa sto facendo qui è, sto semplicemente applicando z-index il div fai clic su jQuery.

Demo 3 (Come si aggiorna la domanda)

---

Utilizzando border per contrassegnare la corrente selezionata div

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

Demo 2

Codice di riferimento:

$(".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>