Senden Funktionalität in HTML5

Question

Ich habe den folgenden Anwendungsfall zu unterstützen, die ich

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

Grundsätzlich in HTML erreichen möchte ich zu minic versuchen, die Funktionalität von Arrange --> Order --> Send to back von Google Presentation

Ich habe z-index ohne Erfolg versucht. Ich kann background-gradient mit dem overlaped Teil blue div transparent verwenden, aber das wird einige Berechnungen invole, die ich vermeiden will.

Wie erreichen Sie dies in HTML?
Jede Hilfe wird geschätzt.

Hinweis: Alle div Elemente mit position: absolute
-Update platziert sind: Die red div liegt über dem blue div als z-index höher als blue div. Wenn red div ausgewählt ist, sollte es wie folgt aussehen (mit hervorgehobener Umrandung).

Nun, wenn ich wählen Sie die blue div ein Teil davon, die mit red div overlapes nicht erscheint (natürlich seit seiner z-index ist weniger), aber ich möchte seine border erscheinen, wenn ich select.it.

Answer 1

Wie Sie kommentiert haben, nehme ich an, was Sie brauchen, ist dies auch, rufen Sie einfach eine class auf einem div, die Sie aufstocken möchten.

Final Demo

---

Ich erhalte Ihre Frage nicht ruhig gut, aber ich nehme an, Sie ein Element über dem anderen bringen wollen, wenn es angeklickt wird, als man es auf diese Weise tun können

Demo

Erläuterung:

Was hier tut, ist, einfach beantragt z-index auf den div klicken Sie mit jQuery.

Demo 3 (Wie Sie aktualisiert Ihre Frage)

---

border Mit den aktuell ausgewählten div

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

Demo 2

Codereferenz markieren:

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